Ce este colapsul de margini și pentru ce se folosește?

Colapsarea marginilor (margin collapsing) este un mecanism în CSS prin care marginile verticale ale două sau mai multor elemente bloc adiacente, precum și ale părintelui și ale primului/ultimului copil, nu se adună, ci se contopesc într-o singură margine egală cu cea mai mare dintre ele.

Colapsarea are loc în următoarele cazuri:

• Elemente adiacente: Marginile margin-bottom superioară a unui element și margin-top a elementului următor.
• Părinte și primul/ultimul copil: margin-top al părintelui și margin-top al primului copil; margin-bottom al părintelui și margin-bottom al ultimului copil. Se întâmplă dacă între ele nu există border, padding, conținut inline sau dacă părinte nu este un container flex/grid.
• Blocuri goale: margin-top al elementului și margin-bottom dacă nu are conținut, border sau padding.

Exemplu de elemente adiacente:

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

În acest caz, distanța dintre elemente va fi de 30px, nu 50px.

Exemplu de părinte și primul copil:

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

Distanța de la marginea superioară a părintelui până la conținutul său va fi de 40px.

Pentru ce se folosește:

Mecanismul de colapsare a marginilor ajută la menținerea unor distanțe verticale previzibile între blocuri în fluxul normal al documentului, evitând spațiile excesive. Simplifică crearea unui ritm tipografic coerent, deoarece designerii pot specifica marginile pentru paragrafe sau titluri independent, iar browserul se va ocupa de combinarea corectă a spațiilor.

Cum se previne:

• Adăugarea unei borduri (border) între elemente sau între părinte și copil.
• Adăugarea padding-ului (padding) între elemente sau între părinte și copil.
• Utilizarea proprietății overflow cu o valoare diferită de visible pe elementul părinte.
• Transformarea elementului în element flotant (float).
• Utilizarea poziționării absolute sau fixed.
• Transformarea elementelor într-un context de formatare Flexbox sau Grid (părinte).
• Transformarea elementului în inline-block.

/* Prevenire pentru părinte și copil */
.parent {
  border-top: 1px solid transparent; /* sau padding-top */
}

/* Prevenire pentru elemente adiacente */
.element + .element {
  margin-top: 0; /* sau border-top */
}