Wat is het samenvoegen van randen in CSS?

Het margin collapsing (marge samenvallen) is een fenomeen in CSS waarbij de verticale marges van twee of meer aangrenzende blokken samenvallen tot één marge. De grootte van deze gemeenschappelijke marge wordt bepaald door de grootste waarde van de samenvallende marges.

Belangrijke regels voor samenvallen:

Alleen verticale marges (margin-top en margin-bottom) vallen samen. Horizontale marges niet.
Alleen de marges van aangrenzende elementen vallen samen als er geen andere elementen, padding, border of inhoud tussen hen is.
De bovenmarge van het eerste kind valt samen met de bovenmarge van de ouder als er geen padding, border of andere inhoud tussen hen is.
De ondermarge van het laatste kind valt samen met de ondermarge van de ouder als er geen padding, border of andere inhoud tussen hen is.
De boven- en ondermarges van een leeg element kunnen samenvallen als het geen padding, border of inhoud heeft.
Als een van de samenvallende marges negatief is, wordt de uiteindelijke grootte bepaald door de som van de positieve en negatieve waarden (of de absolute waarde als beide negatief zijn en de som kleiner is dan nul).

Voorbeeld:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

In dit geval is de verticale afstand tussen box1 en box2 30px (de grootste waarde tussen 20px en 30px), niet 50px.

Manieren om samenvallen te voorkomen:

Voeg padding of border toe tussen de elementen.
Maak een nieuw opmaakblok (bijvoorbeeld met overflow: hidden, display: flow-root of zwevende elementen).
Gebruik display: inline-block, display: flex of display: grid voor de elementen.
Gebruik absolute positionering.