CSS -marge ineenstort
Soms stort twee kantlyne in 'n enkele kantlyn in.
Marge ineenstort
Boonste en onderste marges van elemente word soms in 'n enkele marge inmekaargevou wat gelyk is aan die grootste van die twee kantlyne.
Dit gebeur nie op linker- en regterkantlyne nie! Slegs boonste en onderste kantlyne!
Kyk na die volgende voorbeeld:
Voorbeeld
Demonstrasie van marge-ineenstorting:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
In die voorbeeld hierbo het die <h1>-element 'n onderste marge van 50px en die <h2>-element het 'n boonste marge wat op 20px gestel is.
Gesonde verstand wil blykbaar voorstel dat die vertikale marge tussen die <h1> en die <h2> 'n totaal van 70px (50px + 20px) sal wees. Maar as gevolg van ineenstorting van die marge, is die werklike marge uiteindelik 50 px.
Alle CSS-marge-eienskappe
| 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 |