Comment fonctionnent les effondrements de marges verticales imbriquées en CSS ?

Comprendre les nuances des effondrements de marges verticales imbriquées

En CSS, le concept d'effondrement de marge joue un rôle crucial dans la détermination de l'espacement entre les éléments sur une page Web. Lorsque les marges des éléments verticalement adjacents se touchent, elles se réduisent en une seule marge, ce qui entraîne un comportement inattendu. Les effondrements de marges verticales imbriquées compliquent encore davantage ce comportement.

Mécanisme d'effondrement des marges imbriquées

Lorsque deux éléments sont imbriqués l'un dans l'autre et que leurs marges se touchent , les deux règles suivantes s'appliquent :

1. Réduire la marge : Les marges se réduisent en une seule marge avec la hauteur maximale des marges individuelles.
2. Câlin : L'élément intérieur "se blottit" contre la bordure supérieure de son conteneur, éliminant tout espace entre les éléments.

Par exemple, considérons le code HTML et CSS suivant :

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

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

Dans ce cas, les marges s'effondrent à 20px (le maximum de 10px et 20px), et le div interne se blottit jusqu'au sommet du div externe.

Cependant, si un contenu ou une bordure sépare les deux marges, l'effondrement est perdu. Cela peut se produire lors de l'ajout d'espaces insécables ou d'une bordure entre les éléments, comme illustré ci-dessous :

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

Remarque : Ce comportement ne s'applique pas aux éléments positionnés comme absolus, fixes, ou flotté.

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!