Effondrement de la marge CSS
Parfois, deux marges s'effondrent en une seule marge.
Effondrement de la marge
Les marges supérieure et inférieure des éléments sont parfois regroupées en une seule marge égale à la plus grande des deux marges.
Cela ne se produit pas sur les marges gauche et droite ! Uniquement les marges supérieure et inférieure !
Regardez l'exemple suivant :
Exemple
Démonstration de l'effondrement de la marge :
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Dans l'exemple ci-dessus, l'élément <h1> a une marge inférieure de 50 pixels et l'élément <h2> a une marge supérieure définie sur 20 pixels.
Le bon sens semblerait suggérer que la marge verticale entre le <h1> et le <h2> serait un total de 70px (50px + 20px). Mais en raison de l'effondrement de la marge, la marge réelle finit par être de 50 pixels.
Toutes les propriétés de marge CSS
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |