CSS Margin Collapse
Někdy se dva okraje zhroutí do jednoho okraje.
Zhroucení okraje
Horní a spodní okraje prvků jsou někdy sbalené do jednoho okraje, který se rovná největšímu ze dvou 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:
Příklad
Ukázka kolapsu marže:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
Ve výše uvedeném příkladu má prvek <h1> spodní okraj 50px a prvek <h2> má horní okraj nastavený na 20px.
Zdá se, že zdravý rozum naznačuje, že svislý okraj mezi <h1> a <h2> by byl celkem 70 pixelů (50 pixelů + 20 pixelů). Ale kvůli kolapsu okrajů je skutečný okraj 50 pixelů.
Všechny vlastnosti okrajů 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 |