Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Fusion des marges

Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.

La fusion des marges se produit si on a l'un de ces trois cas :

Des éléments voisins adjacents
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi :
 <p>La marge basse de ce paragraphe est fusionnée…</p>
 <p>… avec la marge haute de celui-ci.</p>
Un élément parent et son premier/dernier élément fils
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline) ou dégagement pour séparer la marge haute d'un bloc avec la marge haute de son premier élément fils qui est un bloc ou quand il n'y a aucune bordure, remplissage, contenu en ligne, height, min-height ou max-height pour séparer la marge basse d'un bloc avec la marge basse de son dernier élément, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
Des blocs vides
S'il n'y a aucune bordure, remplissage, contenu en ligne, height ou min-height pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge du premier/dernier élément fils finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de 'margin collapsing' dans cette spécification.
Recommendation Définition initiale.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB, Elethiomel, Worms, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,