CSS -marge samenvouwen
Soms vallen twee marges in een enkele marge.
Marge samenvouwen
De boven- en ondermarges van elementen worden soms samengevouwen tot één enkele marge die gelijk is aan de grootste van de twee marges.
Dit gebeurt niet aan de linker- en rechtermarge! Alleen boven- en ondermarges!
Kijk naar het volgende voorbeeld:
Voorbeeld
Demonstratie van instorting van de marge:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
In het bovenstaande voorbeeld heeft het <h1>-element een ondermarge van 50px en het <h2>-element een bovenmarge die is ingesteld op 20px.
Gezond verstand lijkt te suggereren dat de verticale marge tussen de <h1> en de <h2> in totaal 70px (50px + 20px) zou zijn. Maar door het instorten van de marge wordt de werkelijke marge 50px.
Alle CSS-marge-eigenschappen
| 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 |