Wat is marge-inklap en waar wordt het voor gebruikt?

Het margin collapsing mechanisme in CSS zorgt ervoor dat de verticale marges van twee of meer aangrenzende blokelementen, evenals van de ouder en de eerste/laatste kind, niet worden opgeteld, maar samenvallen tot één marge die gelijk is aan de grootste van hen.

Het samenvallen gebeurt in de volgende gevallen:

• Aangrenzende elementen: De margin-bottom van het bovenste element en de margin-top van het volgende.
• Ouder en eerste/laatste kind: margin-top van de ouder en margin-top van het eerste kind; margin-bottom van de ouder en margin-bottom van het laatste kind. Dit gebeurt als er geen rand (border), padding, inline inhoud (inline) tussen hen is of als de ouder geen flex/grid container is.
• Lege blokken: margin-top van het element en zijn margin-bottom, als het geen inhoud, randen of padding heeft.

Voorbeeld van aangrenzende elementen:

<div style="margin-bottom: 20px;">Element 1</div>
<div style="margin-top: 30px;">Element 2</div>

In dit geval wordt de afstand tussen de elementen 30px, niet 50px.

Voorbeeld van ouder en eerste kind:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Kind</div>
</div>

De afstand van de bovenrand van de ouder tot de inhoud is 40px.

Waarvoor wordt het gebruikt:

Het margin collapsing mechanisme helpt bij het behouden van voorspelbare verticale afstanden tussen blokken in de normale stroom van het document, en voorkomt overbodige ruimte. Het vereenvoudigt het creëren van een consistente typografische verticale ritme, omdat ontwerpers marges kunnen specificeren voor paragrafen of koppen onafhankelijk, en de browser zorgt voor de juiste samenvoeging van de ruimtes.

Hoe het te voorkomen:

• Een rand (border) toevoegen tussen elementen of tussen de ouder en de kind.
• Padding (padding) toevoegen tussen elementen of tussen de ouder en de kind.
• De eigenschap overflow gebruiken met een waarde anders dan visible op het ouder-element.
• Een zwevend element (float) gebruiken.
• Absolute of vaste positionering (absolute, fixed) toepassen.
• De elementen omzetten in een Flexbox- of Grid-formatteringscontext (ouderlijke element).
• Het element in inline-block veranderen.

/* Voorkomen voor ouder en kind */
.parent {
  border-top: 1px solid transparent; /* of padding-top */
}

/* Voorkomen voor aangrenzende elementen */
.element + .element {
  margin-top: 0; /* of border-top */
}