Was ist das Zusammenfallen von Rändern in CSS?

Das Zusammenfallen von Rändern (margin collapsing) ist ein Phänomen in CSS, bei dem vertikale Ränder benachbarter Blöcke zu einem einzigen verschmelzen. Die Größe dieses zusammengefallenen Rands wird als der maximale Wert der kollabierenden Ränder bestimmt.

Das Zusammenfallen tritt in folgenden Fällen auf:

• Zwischen benachbarten Elementen: Die vertikalen Ränder zweier benachbarter Elemente kollabieren.

  <p>Absatz 1</p>
  <p>Absatz 2</p>
  

  Wenn <p> margin-bottom und margin-top jeweils hat, können diese Ränder kollabieren.

• Zwischen einem Elternelement und seinem ersten/letzten Kind: Wenn das Elternelement keinen border, padding, display: flex, display: grid, overflow: hidden oder andere Eigenschaften hat, die einen Formatierungskontext schaffen, kann seine obere Margin mit margin-top des ersten Kindes kollabieren. Ähnlich kann die untere Margin des Elternelements mit margin-bottom des letzten Kindes kollabieren.

  <div class="parent">
    <p class="child">Kind-Element</p>
  </div>
  

• Bei leerem Element: Wenn ein Element keinen Inhalt hat (height: 0, kein border und kein padding), können seine obere und untere Margin miteinander kollabieren.

  <div class="empty"></div>
  

Tabelle, die die Ergebnisse des Zusammenfalls veranschaulicht:

Margin 1	Margin 2	Ergebnis des Zusammenfalls
10px	15px	15px
20px	-5px	20px
-10px	-15px	-10px

Das Zusammenfallen von Rändern tritt nur in vertikaler Richtung auf (margin-top und margin-bottom). Horizontale Ränder (margin-left und margin-right) kollabieren niemals.

Es gibt Möglichkeiten, das Zusammenfallen zu verhindern, z.B. durch Hinzufügen von border, padding, Verwendung von display: flex, display: grid, overflow: hidden oder durch Erstellen eines neuen Formatierungskontexts mit display: flow-root.