communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > HTML中的嵌套的div，子DIV设置的margin样式怎么变成父DIV的样式了_html/css_WEB-ITnose

HTML中的嵌套的div，子DIV设置的margin样式怎么变成父DIV的样式了_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:02:22
original
1098 Les gens l'ont consulté

nbsp;HTML>


定位布局












回复讨论(解决方案)

有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div

u013472677:有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div


为什么呢？感觉就像Bug一样啊

垂直外边距合并问题,建议你看看 http://www.w3school.com.cn/css/css_margin_collapsing.asp
常用解决方法无非是
1.设置父元素的padding-top或者bottom(记得设置padding后要重新计算父元素的高度).
2.给父元素添加属性overflow:hidden
其余还有一些方法不过限制条件有些多, 乱用可能造成更多页面bug,让你疯掉.

Étiquettes associées：
div margin 嵌套 样式 设置
source：php.cn
Article précédent：20款优秀的国外 Mobile App 界面设计案例_html/css_WEB-ITnose Article suivant：htnl样式求教。有模板，求简化_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Pourquoi un enfant de grille avec une largeur fixe et une largeur maximale de 90 % déborde-t-il de la piste de la grille ? Question : Ma question est très simple, je veux savoir pourquoi l'élément .header déborde ...
Depuis 2024-04-05 14:33:39
0
1
1426
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...
Depuis 2024-04-04 20:25:22
0
1
330
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal