Comment empêcher l'effondrement de la marge entre une division enfant avec « marge supérieure » ​​et une division parent sans bordure supérieure ?

CSS : Gestion de la marge supérieure lorsque la division parent n'a pas de bordure supérieure

Lorsqu'un élément enfant a une marge supérieure et que son élément parent n'a pas de bordure supérieure, l'enfant la marge de l'élément peut créer des incohérences visuelles. Comme illustré dans l'image fournie, le div orange semble pousser le div vert vers le bas, bien que ce dernier n'ait pas de bordure supérieure.

Pour résoudre ce problème sans ajouter de bordure au div parent, vous pouvez implémenter une solution qui empêche l’effondrement des marges. L'effondrement des marges est un comportement CSS qui se produit lorsque les marges des éléments adjacents (dans ce cas, les divs vert et orange) s'effondrent en une seule marge.

Pour éviter l'effondrement des marges, ajoutez le CSS suivant à l'élément parent :

overflow: auto;

L'application de overflow:auto à .body dans l'extrait CSS fourni empêchera l'effondrement des marges et maintiendra la disposition visuelle souhaitée. Vous pouvez trouver plus de détails sur la réduction des marges dans la spécification du W3C : http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!