Co je sloučení okrajů v CSS?

Skládání okrajů (margin collapsing) je jev v CSS, kdy se svislé okraje dvou nebo více sousedních bloků sloučí do jednoho okraje. Velikost tohoto společného okraje je určena největší hodnotou ze skládajících se okrajů.

Hlavní pravidla skládání:

• Skládají se pouze svislé okraje (margin-top a margin-bottom). Horizontální okraje se neskládají.
• Skládají se pouze okraje sousedních prvků, pokud mezi nimi nejsou jiné prvky, padding, border nebo obsah bloku.
• Horní okraj prvního potomka se sloučí s horním okrajem jeho rodiče, pokud mezi nimi není padding, border nebo jiný obsah.
• Dolní okraj posledního potomka se sloučí s dolním okrajem jeho rodiče, pokud mezi nimi není padding, border nebo jiný obsah.
• Horní a dolní okraje prázdného prvku se mohou sloučit, pokud nemá padding, border nebo obsah.
• Pokud je jeden ze skládajících se okrajů záporný, konečná velikost je součtem kladných a záporných hodnot (nebo absolutní hodnotou, pokud jsou oba záporné a součet je menší než nula).

Příklad:

<div class="box1">Prvek 1</div>
<div class="box2">Prvek 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

V tomto případě bude vertikální vzdálenost mezi box1 a box2 30px (největší z hodnot 20px a 30px), nikoli 50px.

Způsoby, jak zabránit skládání:

• Přidat padding nebo border mezi prvky.
• Vytvořit nový formátovací blok (například pomocí overflow: hidden, display: flow-root nebo plovoucích prvků).
• Použít display: inline-block, display: flex nebo display: grid pro prvky.
• Použít absolutní pozicování.