Pourquoi la marge supérieure d'un élément enfant s'étend-elle au-delà d'un parent sans frontières ?

Indentation de la marge supérieure lorsque l'élément parent n'a pas de bordure

Lorsque vous rencontrez un scénario dans lequel un élément avec une marge supérieure s'étend au-delà des limites de son élément parent, qui n'a pas de bordure supérieure, cela peut prêter à confusion. Cette indentation peut entraîner un espacement indésirable dans les mises en page.

Dans cet exemple spécifique, un div orange est imbriqué dans un div vert qui n'a pas de bordure supérieure. Malgré une marge supérieure de 30 px, le div orange dépasse en dessous de son parent.

Pour résoudre ce problème, une solution possible consiste à introduire une bordure supérieure au div vert. Cependant, cela peut ne pas être réalisable si un bord supérieur sans bordure est une exigence de conception.

Une approche alternative consiste à appliquer "overflow: auto" au div vert (.body). Cette technique empêche l'effondrement des marges entre les éléments, contenant ainsi le div orange dans les limites de son parent.

L'extrait de code CSS ci-dessous démontre la mise en œuvre de cette solution :

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

En appliquant ceci correctif, le div orange ne sera plus en retrait au-delà du div vert, permettant à la mise en page de conserver son espacement prévu.

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!