Kas yra kraštinių susiliejimas CSS?

Ribų susiliejimas (margin collapsing) — tai CSS reiškinys, kai šalia esantys blokai sujungia savo vertikalius kraštus į vieną. Šios sujungtos ribos dydis nustatomas kaip didžiausia iš susiliejusių ribų reikšmių.

Susiliejimas vyksta šiais atvejais:

Tarp šalia esančių elementų: dviejų šalia esančių elementų vertikalūs kraštai susilieja.
```
<p>Pastraipa 1</p>
<p>Pastraipa 2</p>
```
Jei <p> turi margin-bottom ir margin-top atitinkamai, šie kraštai gali susilieti.
Tarp tėvo ir pirmojo/paskutinio vaiko elemento: Jei tėvas neturi border, padding, display: flex, display: grid, overflow: hidden ir kitų savybių, kurios sukuria formatavimo kontekstą, jo viršutinė riba gali susilieti su pirmojo vaiko margin-top. Panašiai, tėvo apatinė riba gali susilieti su paskutinio vaiko margin-bottom.
```
<div class="parent">
  <p class="child">Vaiko elementas</p>
</div>
```
Tuščio elemento atveju: Jei elementas neturi turinio (height: 0, border ir padding nėra), jo viršutinės ir apatinės ribos gali susilieti.
```
<div class="empty"></div>
```

Ribų susiliejimo rezultatus iliustruojanti lentelė:

Margin 1	Margin 2	Susiliejimo rezultatas
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Ribų susiliejimas vyksta tik vertikaliame kryptyje (margin-top ir margin-bottom). Horizontalūs kraštai (margin-left ir margin-right) niekada nesusilieja.

Yra būdų išvengti susiliejimo, pavyzdžiui, pridėti border, padding, naudoti display: flex, display: grid, overflow: hidden arba sukurti naują formatavimo kontekstą naudojant display: flow-root.