Ce este colapsul marginilor în CSS?

Colapsarea marginilor (margin collapsing) este un fenomen în CSS în care marginile verticale ale două sau mai multor blocuri adiacente se unesc într-o singură margine. Dimensiunea acestei margini comune este determinată de cea mai mare valoare dintre marginile care se colapsează.

Reguli principale ale colapsului:

• Se colapsează doar marginile verticale (margin-top și margin-bottom). Marginile orizontale nu se colapsează.
• Se colapsează doar marginile elementelor adiacente dacă între ele nu există alte elemente, padding, border sau conținut de bloc.
• Marginea superioară a primului copil se va colapsa cu marginea superioară a părintelui dacă între ele nu există padding, border sau alt conținut.
• Marginea inferioară a ultimului copil se va colapsa cu marginea inferioară a părintelui dacă între ele nu există padding, border sau alt conținut.
• Marginile superioare și inferioare ale unui element gol pot colapsa între ele dacă nu are padding, border sau conținut.
• Dacă una dintre marginile care se colapsează este negativă, dimensiunea finală este suma valorilor pozitive și negative (sau valoarea absolută dacă ambele sunt negative și suma este mai mică decât zero).

Exemplu:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

În acest caz, distanța verticală dintre box1 și box2 va fi de 30px (valoarea maximă dintre 20px și 30px), nu 50px.

Modalități de prevenire a colapsului:

• Adăugați padding sau border între elemente.
• Creați un nou bloc de formatare (de exemplu, cu overflow: hidden, display: flow-root sau elemente flotante).
• Utilizați display: inline-block, display: flex sau display: grid pentru elemente.
• Utilizați poziționare absolută.