Kas ir robežu saplūšana CSS?

Rindu saplūšana (margin collapsing) ir CSS parādība, kad blakus esošo bloku vertikālie ribi saplūst vienā. Šīs saplūšanas rezultātā apvienotās ribas lielums ir maksimālā no saplūstošajām vērtībām.

Saplūšana notiek šādos gadījumos:

Starp blakus esošiem elementiem: Divu blakus esošo elementu vertikālie ribi saplūst.
```
<p>Rindkopa 1</p>
<p>Rindkopa 2</p>
```
Ja <p> ir margin-bottom un margin-top attiecīgi, šīs ribas var saplūst.
Starp vecāku un pirmo/ pēdējo bērna elementu: Ja vecākam nav border, padding, display: flex, display: grid, overflow: hidden un citu īpašību, kas rada formatēšanas kontekstu, tā augšējā riba var saplūst ar pirmā bērna margin-top. Līdzīgi, vecāka apakšējā riba var saplūst ar pēdējā bērna margin-bottom.
```
<div class="parent">
  <p class="child">Bērna elements</p>
</div>
```
Tukša elementa gadījumā: Ja elements nav saturā (height: 0, border un padding nav), tā augšējās un apakšējās ribas var saplūst.
```
<div class="empty"></div>
```

Ribu saplūšanas rezultātu tabula:

Margin 1	Margin 2	Rezultāts
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Ribu saplūšana notiek tikai vertikālā virzienā (margin-top un margin-bottom). Horizontālās ribas (margin-left un margin-right) nekad nesaplūst.

Lai novērstu saplūšanu, ir pieejami dažādi veidi, piemēram, pievienojot border, padding, izmantojot display: flex, display: grid, overflow: hidden vai izveidojot jaunu formatēšanas kontekstu ar display: flow-root.