Czym jest zjawisko zbiegania się marginesów (margin collapse) i do czego służy?

Kurczenie się marginesów (margin collapsing) to mechanizm w CSS, w którym pionowe marginesy dwóch lub więcej sąsiadujących elementów blokowych, a także elementu nadrzędnego i jego pierwszego/ostatniego dziecka, nie sumują się, lecz zlewają w jeden margines równy największemu z nich.

Kurczenie się marginesów występuje w następujących przypadkach:

• Sąsiadujące elementy: Górny margin-bottom jednego elementu i margin-top następnego.
• Rodzic i pierwszy/ostatni element dziecka: margin-top rodzica i margin-top pierwszego dziecka; margin-bottom rodzica i margin-bottom ostatniego dziecka. Występuje, jeśli między nimi nie ma granicy (border), paddingu, zawartości inline (inline) lub jeśli rodzic nie jest kontenerem flex/grid.
• Puste bloki: margin-top elementu i jego margin-bottom, jeśli nie ma zawartości, granic lub paddingu.

Przykład sąsiadujących elementów:

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

W tym przypadku odległość między elementami wyniesie 30px, a nie 50px.

Przykład rodzica i pierwszego dziecka:

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

Odległość od górnej krawędzi rodzica do jego zawartości będzie wynosić 40px.

Do czego to służy:

Kurczenie marginesów pomaga utrzymać przewidywalne pionowe odległości między blokami w normalnym przepływie dokumentu, zapobiegając nadmiernym przerwom. Ułatwia tworzenie spójnej rytmiki typograficznej, ponieważ projektanci mogą niezależnie określać marginesy dla akapitów lub nagłówków, a przeglądarka sama zadba o poprawne łączenie przestrzeni.

Jak temu zapobiec:

• Dodać granicę (border) między elementami lub między rodzicem a dzieckiem.
• Dodać padding (padding) między elementami lub między rodzicem a dzieckiem.
• Używać właściwości overflow z wartością inną niż visible na elemencie nadrzędnym.
• Używać elementu float (float).
• Używać pozycjonowania absolute lub fixed.
• Przekształcić elementy w kontekst formatowania Flexbox lub Grid (element nadrzędny).
• Przekształcić element w inline-block.

/* Zapobieganie dla rodzica i dziecka */
.parent {
  border-top: 1px solid transparent; /* lub padding-top */
}

/* Zapobieganie dla sąsiadujących elementów */
.element + .element {
  margin-top: 0; /* lub border-top */
}