Comment fonctionne l'effondrement de la marge verticale dans les éléments imbriqués ?

Les mécanismes de l'effondrement des marges verticales imbriquées

Comprendre le concept d'effondrement des marges verticales dans les éléments imbriqués peut être un défi pour les débutants. Dans cet article, nous allons démystifier ce comportement avec des explications et des exemples simplifiés.

Bases de l'effondrement des marges verticales

L'effondrement des marges verticales fait référence à la situation où les marges verticales des éléments adjacents les éléments s'effondrent ou fusionnent en une seule marge. Cet effondrement se produit lorsque deux marges verticales ou plus se touchent, ce qui donne une marge unique plus grande.

Éléments imbriqués et effondrement des marges

Lorsque les éléments sont imbriqués les uns dans les autres, un ensemble unique de règles s’applique à la réduction des marges verticales. Les éléments imbriqués présentent un phénomène connu sous le nom de « câlin », dans lequel ils s'alignent étroitement au début de leur conteneur à moins qu'ils ne soient séparés par des éléments spécifiques, tels que des bordures ou du texte précédent.

Exemple

Considérez la structure HTML suivante :

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

Si le div externe a une marge supérieure de 10 px et que le div interne a une marge supérieure de 20 px, les marges verticales se réduisent à 20 px (le maximum des deux marges). En conséquence, le div interne se blottit au sommet du div externe, comme illustré ci-dessous :

[Image de l'effondrement de la marge imbriquée]

Prévenir l'effondrement de la marge

L'effondrement peut être évité en utilisant :

• Une bordure entre les éléments imbriqués
• Contenu précédent dans le conteneur (par exemple, du texte)
• Non -briser les espaces blancs

En introduisant l'un de ces éléments, le mécanisme de réduction est rompu et les marges individuelles sont appliquées.

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!