Kas yra tarpų susiliejimas (margin collapse) ir kam…

CSS, susijęs su margin collapsing, yra mechanizmas, kai dviejų ar daugiau šalia esančių blokinių elementų vertikalūs marginai nesusijungia, o susilieja į vieną marginą, lygų didžiausiam iš jų.

Susiliejimas įvyksta šiais atvejais:

Šalia esantys elementai: viršutinis margin-bottom vieno elemento ir margin-top kito.
Tėvas ir pirmas/paskutinis vaikas: tėvo ir pirmo ar paskutinio vaiko margin-top ir margin-bottom. Tai vyksta, jei tarp jų nėra ribos (border), padding, inline turinio arba jei tėvas nėra flex/grid konteineris.
Tušti blokai: jei jų turinys, riba ar padding nėra, jų margin-top ir margin-bottom susilieja.

Pavyzdys šalia esančių elementų:

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

Šiuo atveju atstumas tarp elementų bus 30px, o ne 50px.

Pavyzdys tėvo ir pirmo vaiko:

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

Atstumas nuo tėvo viršaus iki turinio bus 40px.

Kam tai naudojama:

Margin collapsing padeda išlaikyti prognozuojamus vertikalius atstumus tarp blokų, išvengiant perteklinių tarpų. Tai palengvina suderintos tipografinės vertikalios ritmikos kūrimą, nes dizaineriai gali nepriklausomai nustatyti marginus paragrafams ar antraščių elementams, o naršyklė pati pasirūpins teisingu erdvės sujungimu.

Kaip to išvengti:

Pridėti ribą (border) tarp elementų arba tarp tėvo ir vaiko.
Pridėti padding tarp jų.
Naudoti overflow savybę su reikšme, kitokia nei visible.
Naudoti float elementus.
Naudoti absolute arba fixed pozicionavimą.
Konvertuoti elementus į Flexbox arba Grid formatavimo kontekstą.
Paversti elementą inline-block.

/* Prevencija tėvo ir vaiko atžvilgiu */
.parent {
  border-top: 1px solid transparent; /* arba padding-top */
}

/* Prevencija šalia esančių elementų */
.element + .element {
  margin-top: 0; /* arba border-top */
}

Kas yra tarpų susiliejimas (margin collapse) ir kam jis naudojamas?