Čo je to zmrštenie okrajov (margin collapse) a na čo sa používa?

Zlúčenie okrajov (margin collapsing) je mechanizmus v CSS, pri ktorom sa vertikálne okraje dvoch alebo viacerých susedných blokových prvkov, ako aj rodiča a jeho prvého/posledného dieťaťa, nesčítavajú, ale zlučujú do jedného okraja rovného najväčšiemu z nich.

Zlučovanie nastáva v týchto prípadoch:

• Susedné prvky: horný margin-bottom jedného prvku a margin-top nasledujúceho.
• Rodič a prvé/posledné dieťa: margin-top rodiča a margin-top prvého dieťaťa; margin-bottom rodiča a margin-bottom posledného dieťaťa. Vzniká, ak medzi nimi nie je hranica (border), odsadenie (padding), vložený (inline) obsah alebo ak rodič nie je flex/grid kontajner.
• Prázdne bloky: margin-top a margin-bottom prvku, ak nemá obsah, hranice alebo odsadenia.

Príklad susedných prvkov:

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

V tomto prípade bude vzdialenosť medzi prvkami 30px, nie 50px.

Príklad rodiča a prvého dieťaťa:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Dieťa prvok</div>
</div>

Vzdialenosť od horného okraja rodiča po jeho obsah bude 40px.

Na čo sa používa:

Zlučovanie okrajov pomáha udržiavať predvídateľné vertikálne vzdialenosti medzi blokmi v normálnom toku dokumentu, zabraňuje nadbytočným medzerám. Uľahčuje vytváranie zladeného vertikálneho rytmu typografie, pretože dizajnéri môžu nezávisle nastavovať okraje pre odstavce alebo nadpisy a prehliadač sa postará o správne zlúčenie priestoru.

Ako zabrániť zlučovaniu:

• Pridaním hranice (border) medzi prvkami alebo medzi rodičom a dieťaťom.
• Pridaním odsadenia (padding) medzi prvkami alebo medzi rodičom a dieťaťom.
• Použitím vlastnosti overflow s hodnotou odlišnou od visible na rodičovskom prvku.
• Použitím plávajúceho prvku (float).
• Použitím pozicovania absolute alebo fixed.
• Premenením prvkov na kontext formátovania Flexbox alebo Grid (rodičovský prvok).
• Premenením prvku na inline-block.

/* Prevencia pre rodiča a dieťa */
.parent {
  border-top: 1px solid transparent; /* alebo padding-top */
}

/* Prevencia pre susedné prvky */
.element + .element {
  margin-top: 0; /* alebo border-top */
}