Qu'est-ce que le collapse des marges et à quoi sert-il?

La collapse des marges (margin collapsing) est un mécanisme en CSS où les marges verticales de deux ou plusieurs éléments de bloc adjacents, ainsi que du parent et du premier/dernier enfant, ne s'additionnent pas, mais se collapsent en une seule marge égale à la plus grande d'entre elles.

Le collapse se produit dans les cas suivants :

• Éléments adjacents : La margin-bottom supérieure d'un élément et la margin-top de l'élément suivant.
• Parent et premier/dernier enfant : margin-top du parent et margin-top du premier enfant ; margin-bottom du parent et margin-bottom du dernier enfant. Cela se produit s'il n'y a pas de bordure (border), de padding, de contenu en ligne (inline) entre eux ou si le parent n'est pas un conteneur flex/grid.
• Blocs vides : margin-top de l'élément et son margin-bottom, s'il n'a pas de contenu, de bordure ou de padding.

Exemple d'éléments adjacents :

<div style="margin-bottom: 20px;">Élément 1</div>
<div style="margin-top: 30px;">Élément 2</div>

Dans ce cas, la distance entre les éléments sera de 30px, pas 50px.

Exemple de parent et premier enfant :

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Enfant</div>
</div>

La distance du bord supérieur du parent à son contenu sera de 40px.

À quoi cela sert-il :

Le collapse des marges aide à maintenir des distances verticales prévisibles entre les blocs dans le flux normal du document, évitant des espaces excessifs. Il simplifie la création d'une rythmicité typographique cohérente, car les concepteurs peuvent spécifier des marges pour les paragraphes ou les titres indépendamment, et le navigateur s'occupera de combiner correctement les espaces.

Comment prévenir le collapse :

• Ajouter une bordure (border) entre les éléments ou entre le parent et l'enfant.
• Ajouter du padding (padding) entre les éléments ou entre le parent et l'enfant.
• Utiliser la propriété overflow avec une valeur différente de visible sur l'élément parent.
• Rendre un élément flottant (float).
• Utiliser le positionnement absolute ou fixed.
• Convertir les éléments en contexte de formatage Flexbox ou Grid (élément parent).
• Transformer l'élément en inline-block.

/* Prévenir pour le parent et l'enfant */
.parent {
  border-top: 1px solid transparent; /* ou padding-top */
}

/* Prévenir pour les éléments adjacents */
.element + .element {
  margin-top: 0; /* ou border-top */
}