Mi az a margók összeolvadása (margin collapse), és mire használják?

A margin collapsing (margin összeolvadás) egy CSS mechanizmus, amely során két vagy több egymás melletti blokk elem függőleges margója, valamint a szülő és az első/utolsó gyermek margója nem összeadódik, hanem egyetlen, a legnagyobb margónak megfelelő margóvá olvad össze.

Az összeolvadás a következő esetekben fordul elő:

• Egymás melletti elemek: Egy elem margin-bottom értéke és a következő elem margin-top értéke.
• Szülő és első/utolsó gyermek: A szülő margin-top értéke és az első gyermek margin-top értéke; a szülő margin-bottom értéke és az utolsó gyermek margin-bottom értéke. Ez akkor történik, ha közöttük nincs határ (border), padding, inline tartalom vagy ha a szülő nem flex/grid konténer.
• Üres blokkok: Az elem margin-top és margin-bottom értéke, ha nincs tartalma, határa vagy paddingja.

Példa egymás melletti elemekre:

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

Ebben az esetben a két elem közötti távolság 30px lesz, nem 50px.

Szülő és első gyermek példája:

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

A szülő felső széléhez képest a tartalom távolsága 40px lesz.

Mire használják:

A margin összeolvadás segít fenntartani a blokkok közötti előre látható függőleges távolságokat a dokumentum normál áramlásában, elkerülve a túlzott üres tereket. Egyszerűsíti a következetes tipográfiai vertikális ritmus kialakítását, mivel a tervezők függetlenül adhatnak meg margókat bekezdésekhez vagy címsorokhoz, és a böngésző gondoskodik a térközök helyes összefűzéséről.

Hogyan lehet megelőzni:

• Margó hozzáadása (border) az elemek vagy a szülő és a gyermek között.
• Padding hozzáadása (padding) az elemek vagy a szülő és a gyermek között.
• Az overflow tulajdonságot olyan értékre állítani, ami nem visible, a szülőnél.
• Egy floatolt elem (float) alkalmazása.
• Az absolute vagy fixed pozíció használata.
• Az elemek Flexbox vagy Grid formázási kontextusba helyezése (szülő elem).
• Inline-blocká alakítás.

/* Megelőzés a szülő és a gyermek esetében */
.parent {
  border-top: 1px solid transparent; /* vagy padding-top */
}

/* Megelőzés egymás melletti elemek esetében */
.element + .element {
  margin-top: 0; /* vagy border-top */
}