Nogle gange falder to marginer sammen til en enkelt margin.
Top- og bundmargen af elementer er nogle gange sammenklappet til en enkelt margin, der er lig med den største af de to marginer.
Dette sker ikke i venstre og højre margin! Kun top- og bundmargener!
Se på følgende eksempel:
Demonstration af marginkollaps:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Prøv det selv →
<!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 eksemplet ovenfor har <h1>-elementet en bundmargen på 50px og <h2> element har en topmargen sat til 20px.
Sund fornuft synes at antyde, at den lodrette margin mellem <h1> og <h2> ville være i alt 70px (50px + 20px). Men på grund af marginkollaps, den faktiske margen ender med at blive 50px.
En stenografi-egenskab til at angive alle marginegenskaberne i én erklæring
Indstiller bundmargenen for et element
Indstiller venstre margen for et element
Indstiller højre margen for et element
Indstiller den øverste margen for et element