Comment fonctionne l'effondrement des marges verticales imbriquées en CSS ?

Comprendre l'effondrement des marges verticales imbriquées pour les débutants en CSS

L'effondrement des marges verticales imbriquées est un concept fondamental dans la mise en page CSS qui régit la façon dont les marges interagissent lorsque les éléments sont imbriqués les uns dans les autres. Pour le comprendre, explorons les règles qui déterminent ce comportement :

• Réduire la marge : Lorsque deux marges se rencontrent, elles s'effondrent en une seule marge, la valeur réduite étant la valeur maximale. des deux marges individuelles.
• Marge Snuggling : Si seule la marge sépare un élément imbriqué de son élément conteneur, l'élément imbriqué se « blottira » au début de l'élément conteneur.
• Exception de flux : L'effondrement et le blotti des marges ne s'appliquent pas aux éléments en dehors du flux normal, tels que les éléments flottants, positionnés de manière absolue ou positionnés fixes.

Considérez les exemple suivant pour illustrer ces règles :

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

Étant donné ces styles :

<code class="css">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}
#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

• Les marges extérieure et intérieure s'effondrent car elles se touchent, ce qui donne une marge combinée de 20 px.
• Le div intérieur se blottit au sommet du div extérieur puisque rien ne les sépare.

Cependant, le moindre changement, comme l'ajout d'un espace insécable entre les éléments ou donner une bordure au div interne empêchera les marges de s’effondrer. En effet, l'espace ou la bordure crée une séparation entre les marges.

La compréhension de ces règles permet aux développeurs de prédire et de contrôler le comportement de mise en page des éléments imbriqués, garantissant ainsi une cohérence entre navigateurs et des résultats prévisibles.

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!