Čo je to zhlukovanie okrajov v CSS?

Margin collapsing je javno v CSS-u, kedy sa susedné bloky zbiehajú do jedného. Veľkosť tohto zbiehajúceho sa marginu je určená ako maximálna hodnota z marginov, ktoré sa zbiehajú.

K zbiehaniu dochádza v týchto prípadoch:

Medzi susednými prvkami: Vertikálne marginy dvoch susedných prvkov sa zbiehajú.
```
<p>Odsek 1</p>
<p>Odsek 2</p>
```
Ak <p> má margin-bottom a margin-top príslušne, tieto marginy sa môžu zbiehať.
Medzi rodičom a jeho prvým/posledným dieťaťom: Ak rodič nemá border, padding, display: flex, display: grid, overflow: hidden alebo iné vlastnosti, ktoré vytvárajú kontext formátovania, jeho horný margin sa môže zbiehať s margin-top prvého dieťaťa. Podobne, dolný margin rodiča sa môže zbiehať s margin-bottom posledného dieťaťa.
```
<div class="parent">
  <p class="child">Dieťa</p>
</div>
```
Pri prázdnom prvku: Ak prvok nemá obsah (height: 0, bez border a padding), jeho horné a dolné marginy sa môžu zbiehať.
```
<div class="empty"></div>
```

Tabuľka ilustrujúca výsledky zbiehania:

Margin 1	Margin 2	Výsledok zbiehania
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Zbiehanie marginov sa deje iba vo vertikálnom smere (margin-top a margin-bottom). Horizontálne marginy (margin-left a margin-right) sa nikdy nezbiehajú.

Existujú spôsoby, ako zabrániť zbiehaniu, napríklad pridaním border, padding, použitím display: flex, display: grid, overflow: hidden alebo vytvorením nového kontextu formátovania pomocou display: flow-root.