Zwiń margines CSS
Czasami dwa marginesy łączą się w jeden.
Zwiń margines
Marginesy górny i dolny elementów są czasami zwinięte w pojedynczy margines, który jest równy największemu z dwóch marginesów.
Nie dzieje się tak na lewym i prawym marginesie! Tylko górne i dolne marginesy!
Spójrz na następujący przykład:
Przykład
Demonstracja zapadania się marginesu:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
W powyższym przykładzie element <h1> ma dolny margines równy 50px, a element <h2> ma margines górny ustawiony na 20px.
Zdrowy rozsądek wydaje się sugerować, że pionowy margines między <h1> a <h2> wynosiłby łącznie 70px (50px + 20px). Ale z powodu załamania się marginesu rzeczywisty margines wynosi 50 pikseli.
Wszystkie właściwości marginesów 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 |