Ibland kollapsar två marginaler till en enda marginal.
De övre och nedre marginalerna på element är ibland hopfällda till en singel marginal som är lika med den största av de två marginalerna.
Detta händer inte på vänster och höger marginal! Endast övre och nedre marginaler!
Titta på följande exempel:
Demonstration av marginalkollaps:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Prova själv →
<!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>
I exemplet ovan har <h1>-elementet en bottenmarginal på 50px och <h2> elementet har en toppmarginal inställd på 20px.
Sunt förnuft verkar föreslå att den vertikala marginalen mellan <h1> och <h2> skulle vara totalt 70px (50px + 20px). Men på grund av marginalkollaps, den faktiska marginalen blir 50px.
En förkortningsegenskap för att sätta alla marginalegenskaper i en deklaration
Ställer in bottenmarginalen för ett element
Ställer in den vänstra marginalen för ett element
Ställer in högermarginalen för ett element
Ställer in den övre marginalen för ett element