Čo je zhlukovanie okrajov v CSS?

Skládanie okrajov (margin collapsing) je jav v CSS, kde sa zvislé okraje dvoch alebo viacerých susedných blokov spoja do jedného okraja. Veľkosť tohto spoločného okraja je určená najväčšou hodnotou zo skladajúcich sa okrajov.

Hlavné pravidlá skládania:

• Skladajú sa iba zvislé okraje (margin-top a margin-bottom). Horizontálne okraje sa neskladajú.
• Skladajú sa iba okraje susedných prvkov, ak medzi nimi nie sú iné prvky, padding, border alebo obsah bloku.
• Horný okraj prvého dieťaťa sa spojí s horným okrajom jeho rodiča, ak medzi nimi nie je padding, border alebo iný obsah.
• Dolný okraj posledného dieťaťa sa spojí s dolným okrajom jeho rodiča, ak medzi nimi nie je padding, border alebo iný obsah.
• Horné a dolné okraje prázdneho prvku sa môžu spojiť, ak nemá padding, border alebo obsah.
• Ak je jedna zo skladajúcich sa okrajov záporná, konečná veľkosť je súčtom pozitívnych a negatívnych hodnôt (alebo absolútna hodnota, ak obe sú záporné a súčet je menší ako nula).

Príklad:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

V tomto prípade bude vertikálna vzdialenosť medzi box1 a box2 30px (najväčšia z hodnôt 20px a 30px), nie 50px.

Spôsoby, ako zabrániť skládaniu:

• Pridať padding alebo border medzi prvkami.
• Vytvoriť nový formátovací blok (napríklad pomocou overflow: hidden, display: flow-root alebo plávajúcich prvkov).
• Použiť display: inline-block, display: flex alebo display: grid pre prvky.
• Použiť absolútne pozicovanie.