CSS Effondrement de Marge

Effondrement de Marge CSS

L'effondrement de marge se produit lorsque deux marges se combinent en une seule.

Les marges supérieures et inférieures des éléments peuvent parfois se combiner en une seule marge, qui est égale à la plus grande des deux.

Remarque : L'effondrement de marge ne se produit qu'avec les marges supérieures et inférieures, et non avec les marges gauche et droite !

Dans l'exemple suivant, l'élément <h1> a une marge inférieure de 50px et l'élément <h2> a une marge supérieure de 20px. Ainsi, la marge verticale entre <h1> et <h2> devrait être de 70px (50px + 20px). Cependant, en raison de l'effondrement de marge, la marge réelle est de 50px :

Dans l'exemple suivant, chaque élément <p> a une marge supérieure de 30px et une marge inférieure de 30px. Donc, la marge verticale entre les éléments <p> aurait dû être de 60px (30px + 30px). Cependant, à cause de l'effondrement de marge, la marge réelle est de 30px :

Toutes les Propriétés de Marge CSS