Fusion des marges
Les marges haute et basse des blocs sont parfois combinées (fusionnées) en une seule marge dont la taille est la plus grande des marges individuelles (ou simplement l'une d'elles si elles sont égales), un comportement appelé fusion des marges. Notez que les marges des éléments flottants et absolument positionnés ne fusionnent jamais.
La fusion des marges se produit dans trois cas principaux :
- Parents adjacents
-
Les marges de frères et sœurs adjacents sont fusionnées (sauf lorsque le second doit être écarté des flottants).
- Aucun contenu ne sépare le parent et les descendants
-
Les marges verticales entre un bloc parent et ses descendants peuvent fusionner. Cela se produit lorsqu'il n'y a aucun contenu séparateur entre eux. Plus précisément, cela arrive dans deux cas principaux :
- La
margin-topd'un parent fusionne avec lamargin-topde son premier descendant en flux, sauf si le parent possède uneborder-top, unepadding-top, contient du contenu en ligne (comme du texte), ou si une clearance est appliquée. - La
margin-bottomd'un parent fusionne avec lamargin-bottomde son dernier descendant en flux, sauf si le parent a uneheightoumin-heightdéfinie, uneborder-bottom, ou unepadding-bottom.
Dans les deux cas, créer un nouveau contexte de formatage de bloc sur le parent empêche aussi ses marges de fusionner avec celles de ses enfants.
- La
- Blocs vides
-
S'il n'y a ni bordure, ni remplissage, ni contenu en ligne, ni
height, nimin-heightpour séparer lamargin-topd'un bloc de samargin-bottom, alors ses marges haute et basse fusionnent.
À noter :
- Une fusion de marges plus complexe (de plus de deux marges) se produit lorsque les cas ci-dessus sont combinés.
- Ces règles s'appliquent même aux marges nulles, donc la marge d'un·e descendant·e se retrouve à l'extérieur de son parent (selon les règles ci-dessus) que la marge du parent soit nulle ou non.
- Lorsque des marges négatives sont impliquées, la taille de la marge fusionnée est la somme de la plus grande marge positive et de la plus petite (la plus négative) marge négative.
- Lorsque toutes les marges sont négatives, la taille de la marge fusionnée est la plus petite (la plus négative) marge. Cela s'applique aussi bien aux éléments adjacents qu'aux éléments imbriqués.
- La fusion des marges ne concerne que la direction verticale.
- Les marges ne fusionnent pas dans un conteneur dont
displayest défini surflexougrid.
Exemples
HTML
<p>La marge basse de ce paragraphe est fusionnée …</p>
<p>
… avec la marge haute de ce paragraphe. On a donc une marge de
<code>1.2rem</code> entre les deux.
</p>
<div>
Cet élément contient deux paragraphes !
<p>
Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.
</p>
<p>
La marge basse de cet élément fusionne avec la marge basse de l'élément
parent. On a donc <code>2rem</code> de marge.
</p>
</div>
<p>Je suis à <code>2rem</code> sous l'élément ci-dessus.</p>
CSS
div {
margin: 2rem 0;
background: lavender;
}
p {
margin: 0.4rem 0 1.2rem 0;
background: yellow;
}