Co je to sloučení okrajů v CSS?

Skládání okrajů (margin collapsing) je jev v CSS, kdy se svislé okraje sousedních bloků sloučí do jednoho. Velikost tohoto sloučeného okraje je určena jako maximální hodnota z okrajů, které se slévají.

K skládání dochází v následujících případech:

Mezi sousedními prvky: Svislé okraje dvou sousedních prvků se sloučí.
```
<p>Odstavec 1</p>
<p>Odstavec 2</p>
```
Pokud <p> má margin-bottom a margin-top odpovídajícím způsobem, tyto okraje se mohou sloučit.
Mezi rodičem a jeho prvním/posledním dítětem: Pokud rodič nemá border, padding, display: flex, display: grid, overflow: hidden nebo jiné vlastnosti, které vytvářejí kontext formátování, jeho horní okraj se může sloučit s margin-top prvního dítěte. Podobně, spodní okraj rodiče se může sloučit s margin-bottom posledního dítěte.
```
<div class="parent">
  <p class="child">Dětský prvek</p>
</div>
```
U prázdného prvku: Pokud prvek nemá obsah (height: 0, bez border a padding), jeho horní a dolní okraje se mohou sloučit.
```
<div class="empty"></div>
```

Tabulka ilustrující výsledky skládání:

Margin 1	Margin 2	Výsledek skládání
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Skládání okrajů se děje pouze ve vertikálním směru (margin-top a margin-bottom). Horizontální okraje (margin-left a margin-right) se nikdy nesloučí.

Existují způsoby, jak skládání zabránit, například přidáním border, padding, použitím display: flex, display: grid, overflow: hidden nebo vytvořením nového kontextu formátování pomocí display: flow-root.