Comment fonctionne l'effondrement des marges verticales avec les éléments imbriqués en CSS ?

Comprendre l'effondrement des marges verticales imbriquées

Le concept d'effondrement des marges verticales en CSS peut prêter à confusion, en particulier lors de l'imbrication d'éléments. Décomposons le mécanisme avec une explication simplifiée.

Deux règles essentielles régissent l'effondrement des marges :

1. Toucher l'effondrement des marges : Lorsque les marges verticales des éléments adjacents se touchent , ils s'effondrent en une seule marge.
2. Nested Snuggle : Si seule la marge sépare les éléments imbriqués, ils se « blottissent » les uns contre les autres, éliminant tout espace créé par la marge de l'élément intérieur.

Considérez la structure HTML suivante :

<code class="HTML"><div id="outer">
    <div id="inner">
        A
    </div>
</div></code>

Et les styles CSS initiaux :

<code class="CSS">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}

#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

Dans ce scénario, la marge du div imbriqué (20px) déclenche un effondrement de la marge avec la marge externe du div (10px), ce qui donne une marge totale de 20px pour l'ensemble du bloc. Le div interne se blottit alors jusqu'au début du conteneur en raison de l'absence de séparation sans marge.

Cependant, si nous introduisons une séparation entre les marges, comme une bordure ou même un espace insécable , l'effondrement est brisé. En effet, les marges qui ne sont plus considérées comme « touchantes » ne s'effondrent pas.

N'oubliez pas que ces règles ne s'appliquent pas aux éléments en dehors du flux régulier (par exemple, les éléments flottants ou positionnés de manière absolue). Comprendre ces concepts vous aidera à développer une compréhension claire du comportement des marges verticales lors de l'imbrication d'éléments dans CSS.

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!