Mis on marginaalide kokkuvarisemine ja milleks seda…

CSS-is margin collapsing mehhanism, mille kohaselt kahe või enama naabri blokielemendi vertikaalsed marginaalid ei liitu, vaid ühinevad üheks marginaaliks, mis võrdub nende suurima marginaaliga.

See toimub järgmistel juhtudel:

Naabri elemendid: ühe elemendi margin-bottom ja järgmise margin-top.
Ema ja esimene/lõplik laps: ema ja tema esimese või viimase lapse margin-top ja margin-bottom. Kui nende vahel ei ole piiri (border), paddingut, inline sisu või kui ema ei ole flex/grid konteiner.
Tühjad blokid: kui neil ei ole sisu, piire või paddingut, siis nende margin-top ja margin-bottom ühinevad.

Näide naabri elementide kohta:

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

Selle puhul on vahe elementide vahel 30px, mitte 50px.

Näide ema ja esimese lapse kohta:

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

Vahe ema ülaäärest ja selle sisust on 40px.

Milleks seda kasutatakse:

Margin collapsing aitab säilitada prognoositavaid vertikaalseid vahemaid blokkide vahel, vältides liigseid tühikuid. See lihtsustab kooskõlastatud tipograafilise vertikaalse rütmi loomist, kuna disainerid saavad määrata marginaale sõltumatult lõigu või pealkirja jaoks, ning brauser hoolitseb õige ruumi ühendamise eest.

Kuidas seda vältida:

Lisades piiri (border) elementide või ema ja lapse vahele.
Lisades paddingut nende vahele.
Kasutades overflow omadust väärtusega, mis ei ole visible.
Kasutades float elemente.
Kasutades absolute või fixed positsioneerimist.
Muutades elemente Flexbox või Grid kontekstis.
Muutades elementi inline-block-ks.

/* Ema ja lapse vältimiseks */
.parent {
  border-top: 1px solid transparent; /* või padding-top */
}

/* Naabri elementide vältimiseks */
.element + .element {
  margin-top: 0; /* või border-top */
}

Mis on marginaalide kokkuvarisemine ja milleks seda kasutatakse?