Le phénomène d'effondrement de marge en CSS expliqué!

Introduction

La mise en page, la lisibilité et l'espacement sont quelques-uns des grands défis que pose le développement d'un site web.
Au cours de la conception, on rencontre des défis qui, suite à un manque d'information, constituent un casse-tête et une source de grande frustration par la suite.

Pourquoi ces écarts de marge entre certains blocs de ma page web? Et comment comprendre que des marges disparaissent? Et pourquoi cette marge-là semble-t-elle s’appliquer à mon conteneur et pas à mon titre ou mon paragraphe? Il se pourrait que vous êtes entrain de faire face au phénomène de fusion des marges.

Cet article va répondre à toutes ces questions.
Tout d'abord:...

Le phénomène de fusion de marge, comment le comprendre?

L’effondrement ou la fusion des marges est un phénomène assez simple à comprendre.
Il peut cependant être très déroutant lorsque vous travaillez à la structuration des mises en page. Lorsque deux marges verticales se rencontrent, elles s’effondrent l’une sur l’autre pour n’en former plus qu’une. La hauteur de cette marge fusionnée est égale à la hauteur de la plus grande des deux.

L’effondrement ou fusion des marges se produit si on est dans un des cas suivants :

a. Des éléments voisins adjacents

Lorsque deux éléments se trouvent l’un directement en dessous de l’autre, la marge inférieure du premier élément fusionne avec la marge supérieure du second sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements. C’est le cas de l'illustration à la Figure 1.

Figure 1 : Exemple d’élément dont la marge supérieure fusionne avec celle de l’élément précédent.

A la figure 1, l'élément supérieur a une marge inférieure de 30 pixels et l'élément inférieur a une marge supérieure définie à 20 pixels. Le bon sens semblerait suggérer que la marge verticale entre ces deux éléments soit d’un total de 30px + 20px, soit de 50px. Mais en raison de l'effondrement de la marge, la marge réelle finit par être de 30 pixels.

b. Aucun contenu séparant le parent et ses descendants

Lorsqu’un élément est contenu dans un autre élément et qu’il n’existe pas de remplissage de bordure, de contenu en ligne (inline), de contexte de formatage de blocs ou dégagement, de height, min-height ou max-height pour séparer les marges hautes ou basses d’un ou plusieurs blocs descendants avec celles de leur parent, il s’en suit des fusionnements (voir Fig. 2).
La marge fusionnée termine en dehors de l’élément parent.

Figure 2 : Exemple d’élément dont la marge supérieure se fusionne avec la marge supérieure de son élément parent.

c. Des blocs vides

Aussi étrange que cela puisse paraître, les marges peuvent s’effondrer sur elles-mêmes. Si un élément vide possède une marge mais sans bordure ni remplissage, la marge supérieure touche la marge du bas et les deux fusionnent (voir Fig. 3).
Cela sous condition qu’il n'y ait aucune bordure, remplissage, contenu en ligne, height ou min-height pour séparer la marge haute d'un bloc de sa marge basse.

Figure 3 : Exemple d’élément dont la marge supérieure fusionne avec la marge inférieure.

--> Si cette marge touche la marge d’un autre élément, elle s’effondre elle-même à nouveau (voir Fig. 4).

Figure 4 : Exemple de marge effondrée d’un élément vide qui fusionne avec les marges d’un autre élément vide.

C’est pour cette raison que les séries d’éléments de paragraphe vides ne prennent que très peu d’espace, car toutes les marges s’effondrent et fusionnent pour n’en former plus qu’une.

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 d'un descendant 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.
Dans une disposition en grille (display : grid), les marges verticales adjacentes des éléments de la grille ne s’effondrent jamais. Ces marges sont contenues par les contours invisibles de la grille.

Mais l’effondrement de marge est-ce une erreur de conception de CSS ?

Après avoir vu ce qu'est le phénomène d'effondrement des marges en CSS, examinons si cela constitue en soi une erreur de conception de la part de CSS.

L’effondrement des marges peut dérouter, mais il est en réalité parfaitement cohérent; et comprenez-le bien, ce n'est pas une erreur de la part de Css.

Pour comprendre cela, considérez une page classique composée de plusieurs paragraphes (voir Figure 5). L’espace au-dessus du premier paragraphe est égal à la marge supérieure. Sans l’effondrement des marges, l’espace entre tous les paragraphes subséquents correspondrait à la somme de leurs marges adjacentes. Il serait alors le double de celui du haut de la page. Grâce à l’effondrement des marges, les marges du haut et du bas de chaque paragraphe fusionnent et produisent un espacement égal partout.

Figure 5 : les marges s’effondrent afin que l’espace reste partout le même entre les éléments.