Kas ir marginu saplūšana un kam tā tiek izmantota?

CSS iekšā margin collapsing ir mehānisms, kurā divi vai vairāki bloka elementu vertikālie margini nesaskaita, bet saplūst vienā marginā, kas ir vienāds ar lielāko no tiem.

Saplūšana notiek šādos gadījumos:

• Sāsu elementi: viena elementa margin-bottom un nākamā elementa margin-top.
• Vecāks un pirmā/pēdējā bērna: vecāka un pirmā vai pēdējā bērna margin-top un margin-bottom. Tas notiek, ja starp tiem nav robežas (border), padding, inline saturs vai ja vecāks nav flex/grid konteiners.
• Tukši bloki: ja tiem nav satura, robežu vai padding, to margin-top un margin-bottom saplūst.

Piemērs sānu elementiem:

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

Šajā gadījumā attālums starp elementiem būs 30px, nevis 50px.

Piemērs vecākam un pirmajam bērnam:

<div style="margin-top: 40px;">
  <div style="margin-top: 30px;">Bērna elements</div>
</div>

Attālums no vecāka augšējā mala līdz saturam būs 40px.

Kā tas tiek izmantots:

Margin collapsing palīdz uzturēt paredzamus vertikālos attālumus starp blokiem, novēršot liekus tukšumus. Tas atvieglo saskaņotas tipogrāfijas vertikālas ritma veidošanu, jo dizaineri var neatkarīgi noteikt marginus paragrāfiem vai virsrakstiem, un pārlūkprogramma pati parūpēsies par pareizu telpas apvienošanu.

Kā to novērst:

• Pievienojot robežu (border) starp elementiem vai starp vecāku un bērnu.
• Pievienojot padding starp tiem.
• Izmantojot overflow īpašību ar vērtību, kas nav visible.
• Izmantojot float elementus.
• Izmantojot absolute vai fixed pozicionēšanu.
• Pārvēršot elementus Flexbox vai Grid kontekstā.
• Pārvēršot elementu uz inline-block.

/* Novēršana vecāka un bērna gadījumā */
.parent {
  border-top: 1px solid transparent; /* vai padding-top */
}

/* Novēršana sānu elementiem */
.element + .element {
  margin-top: 0; /* vai border-top */
}