Was ist das Zusammenfallen von Rändern in CSS?

Das Zusammenfallen von Rändern (margin collapsing) ist ein CSS-Phänomen, bei dem vertikale Ränder von zwei oder mehr nebeneinander stehenden Blöcken zu einer einzigen Ränder verschmelzen. Die Größe dieses gemeinsamen Rands wird durch den größten Wert der zusammenfallenden Ränder bestimmt.

Hauptregeln des Zusammenfalls:

• Es fallen nur vertikale Ränder (margin-top und margin-bottom) zusammen. Horizontale Ränder fallen nicht zusammen.
• Es fallen nur die Ränder benachbarter Elemente zusammen, wenn zwischen ihnen keine anderen Elemente, kein Padding, kein Border oder Inhalt im Block-Format vorhanden ist.
• Der obere Rand des ersten Kindelements verschmilzt mit dem oberen Rand seines Elternteils, wenn zwischen ihnen kein padding, border oder anderer Inhalt ist.
• Der untere Rand des letzten Kindelements verschmilzt mit dem unteren Rand seines Elternteils, wenn zwischen ihnen kein padding, border oder anderer Inhalt ist.
• Die oberen und unteren Ränder eines leeren Elements können zusammenfallen, wenn es kein padding, border oder Inhalt hat.
• Wenn einer der zusammenfallenden Ränder negativ ist, ist die endgültige Größe die Summe der positiven und negativen Werte (oder der Betrag, wenn beide negativ sind und die Summe kleiner als null ist).

Beispiel:

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

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

In diesem Fall beträgt der vertikale Abstand zwischen box1 und box2 30px (der größte Wert zwischen 20px und 30px), nicht 50px.

Methoden zur Verhinderung des Zusammenfalls:

• padding oder border zwischen den Elementen hinzufügen.
• Einen neuen Formatierungsblock erstellen (z.B. mit overflow: hidden, display: flow-root oder float-Elementen).
• display: inline-block, display: flex oder display: grid für die Elemente verwenden.
• Absolute Positionierung verwenden.