Wat is het samenvoegen van randen in CSS?

Het samenvallen van marges (margin collapsing) is een fenomeen in CSS waarbij verticale marges van aangrenzende blokken samensmelten tot één. De grootte van deze samengevoegde marge wordt bepaald als de maximale waarde van de samenvallende marges.

Het samenvallen gebeurt in de volgende gevallen:

Tussen aangrenzende elementen: De verticale marges van twee naast elkaar liggende elementen samenvallen.
```
<p>Paragraaf 1</p>
<p>Paragraaf 2</p>
```
Als <p> respectievelijk margin-bottom en margin-top heeft, kunnen deze marges samenvallen.
Tussen een ouder en zijn eerste/laatste kind: Als de ouder geen border, padding, display: flex, display: grid, overflow: hidden of andere eigenschappen heeft die een formatteringscontext creëren, kan de bovenmarge van de ouder samenvallen met de margin-top van het eerste kind. Evenzo kan de ondermarge van de ouder samenvallen met de margin-bottom van het laatste kind.
```
<div class="parent">
  <p class="child">Kind-element</p>
</div>
```
Bij een leeg element: Als een element geen inhoud heeft (height: 0, geen border en geen padding), kunnen de boven- en ondermarges van dat element met elkaar samenvallen.
```
<div class="empty"></div>
```

Tabel die de resultaten van het samenvallen illustreert:

Margin 1	Margin 2	Resultaat van het samenvallen
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Het samenvallen van marges gebeurt alleen in verticale richting (margin-top en margin-bottom). Horizontale marges (margin-left en margin-right) samenvallen nooit.

Er zijn manieren om het samenvallen te voorkomen, zoals het toevoegen van border, padding, het gebruiken van display: flex, display: grid, overflow: hidden of het creëren van een nieuwe formatteringscontext met display: flow-root.