Parfois, deux marges se transforment en une seule.
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 :
Démonstration de l'effondrement de la marge :
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
Dans l'exemple ci-dessus, l'élément <h1> a une marge inférieure de 50px et le <h2> L'élément a une marge supérieure définie sur 20 px.
Le bon sens semble suggérer que la marge verticale entre le <h1> et le <h2> serait un total de 70px (50px + 20px). Mais à cause de l'effondrement des marges, la marge réelle finit par être de 50 px.
Une propriété raccourcie pour définir toutes les propriétés de marge dans une seule déclaration
Définit la marge inférieure d'un élément
Définit la marge gauche d'un élément
Définit la marge droite d'un élément
Définit la marge supérieure d'un élément