Co je to sloučení okrajů (margin collapse) a k čemu se používá?

Mechanismus srážení okrajů (margin collapsing) v CSS je proces, při kterém se vertikální okraje dvou nebo více sousedních blokových prvků, stejně jako okraj rodiče a jeho prvního/posledního potomka, ne sčítají, ale sloučí do jednoho okraje rovného největšímu z nich.

Srážení okrajů nastává v následujících případech:

• Sousední prvky: Horní margin-bottom jednoho prvku a margin-top následujícího.
• Rodič a první/poslední potomek: margin-top rodiče a margin-top prvního potomka; margin-bottom rodiče a margin-bottom posledního potomka. K tomu dochází, pokud mezi nimi není hranice (border), výplň (padding), inline obsah nebo pokud rodič není flex/grid kontejner.
• Prázdné bloky: margin-top prvku a jeho margin-bottom, pokud nemá obsah, hranice nebo výplň.

Příklad sousedních prvků:

<div style="margin-bottom: 20px;">Prvek 1</div>
<div style="margin-top: 30px;">Prvek 2</div>

V tomto případě bude vzdálenost mezi prvky 30px, nikoli 50px.

Příklad rodiče a prvního potomka:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Potomek</div>
</div>

Vzdálenost od horního okraje rodiče k jeho obsahu bude 40px.

K čemu to slouží:

Mechanismus srážení okrajů pomáhá udržovat předvídatelné vertikální vzdálenosti mezi bloky v normálním toku dokumentu, čímž zabraňuje nadbytečnému prostoru. Zjednodušuje tvorbu konzistentního vertikálního rytmu typografie, protože návrháři mohou nezávisle nastavovat okraje odstavců nebo nadpisů a prohlížeč se postará o správné spojení prostorů.

Jak tomu zabránit:

• Přidáním hranice (border) mezi prvky nebo mezi rodičem a potomkem.
• Přidáním výplně (padding) mezi prvky nebo mezi rodičem a potomkem.
• Použitím vlastnosti overflow s hodnotou odlišnou od visible na rodičovském prvku.
• Použitím floatu (float).
• Použitím absolutního nebo fixního pozicování (absolute, fixed).
• Převodem prvků na kontext formátování Flexbox nebo Grid (rodičovský prvek).
• Převodem prvku na inline-block.

/* Prevence pro rodiče a potomka */
.parent {
  border-top: 1px solid transparent; /* nebo padding-top */
}

/* Prevence pro sousední prvky */
.element + .element {
  margin-top: 0; /* nebo border-top */
}