Někdy se dva okraje zhroutí do jednoho okraje.
Horní a spodní okraje prvků jsou někdy sbalené do jednoho rozpětí, které se rovná největšímu z obou okrajů.
To se nestává na levém a pravém okraji! Pouze horní a dolní okraj!
Podívejte se na následující příklad:
Ukázka kolapsu marže:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}Zkuste to sami →
<!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>
Ve výše uvedeném příkladu má prvek <h1> spodní okraj 50 pixelů a <h2> prvek má horní okraj nastavený na 20px.
Zdá se, že zdravý rozum naznačuje, že vertikální okraj mezi <h1> a <h2> by bylo celkem 70px (50px + 20px). Ale kvůli kolapsu marží skutečný okraj je nakonec 50 pixelů.
Zkrácená vlastnost pro nastavení všech vlastností okraje v jedné deklaraci
Nastaví spodní okraj prvku
Nastaví levý okraj prvku
Nastaví pravý okraj prvku
Nastaví horní okraj prvku