Was ist das Zusammenfallen von Abständen (Margin Collapse) und wofür wird es verwendet?

Das Zusammenfallen von Margen (margin collapsing) ist ein Mechanismus in CSS, bei dem die vertikalen Margen zweier oder mehrerer benachbarter Blockelemente sowie des Elternelements und seines ersten/letzten Kindes nicht addiert werden, sondern zu einer einzigen Margin verschmelzen, die der größten von ihnen entspricht.

Das Zusammenfallen tritt in folgenden Fällen auf:

• Benachbarte Elemente: Der obere margin-bottom eines Elements und der margin-top des nächsten.
• Elternteil und erstes/letztes Kind: margin-top des Elternteils und margin-top des ersten Kindes; margin-bottom des Elternteils und margin-bottom des letzten Kindes. Es passiert, wenn zwischen ihnen keine Grenze (border), kein Innenabstand (padding), inline-Inhalt (inline) vorhanden ist oder wenn der Elternteil kein Flex/Grid-Container ist.
• Leere Blöcke: margin-top des Elements und sein margin-bottom, wenn es keinen Inhalt, keine Grenze oder kein Padding hat.

Beispiel für benachbarte Elemente:

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

In diesem Fall beträgt der Abstand zwischen den Elementen 30px, nicht 50px.

Beispiel für Elternteil und erstes Kind:

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

Der Abstand vom oberen Rand des Elternteils bis zu seinem Inhalt beträgt 40px.

Wozu es dient:

Das Zusammenfallen von Margen hilft, vorhersehbare vertikale Abstände zwischen Blöcken im normalen Dokumentenfluss zu gewährleisten und übermäßige Lücken zu vermeiden. Es vereinfacht die Erstellung einer konsistenten typografischen vertikalen Rhythmik, da Designer Margen für Absätze oder Überschriften unabhängig festlegen können, und der Browser kümmert sich um die korrekte Zusammenführung der Abstände.

Wie man das Zusammenfallen verhindert:

• Eine Grenze (border) zwischen Elementen oder zwischen Elternteil und Kind hinzufügen.
• Innenabstand (padding) zwischen Elementen oder zwischen Elternteil und Kind hinzufügen.
• Die Eigenschaft overflow mit einem Wert ungleich visible beim Elternteil verwenden.
• Ein floatendes Element (float) verwenden.
• Absolute oder fixe Positionierung (absolute, fixed) verwenden.
• Die Elemente in einen Flexbox- oder Grid-Formatierungskontext umwandeln (Elternelement).
• Das Element in inline-block umwandeln.

/* Verhinderung zwischen Elternteil und Kind */
.parent {
  border-top: 1px solid transparent; /* oder padding-top */
}

/* Verhinderung zwischen benachbarten Elementen */
.element + .element {
  margin-top: 0; /* oder border-top */
}