Beherrschung des Zusammenfallens von Rändern
Die oberen und unteren Ränder von Blockelementen werden manchmal zu einem einzigen Rand zusammengeführt (kollabiert), dessen Größe der größte der einzelnen Ränder ist (oder einer von ihnen, wenn sie gleich sind). Dieses Verhalten wird als Margin Collapse bezeichnet. Beachten Sie, dass die Ränder von fließenden und absolut positionierten Elementen niemals kollabieren.
Das Zusammenfallen der Ränder tritt in drei grundlegenden Fällen auf:
- Angrenzende Geschwister
-
Die Ränder angrenzender Geschwister kollabieren (außer wenn das nachfolgende Geschwister bereinigt werden muss, um Fließendes zu umgehen).
- Kein Inhalt zwischen Eltern und Nachkommen
-
Die vertikalen Ränder zwischen einem Eltern-Block und seinen Nachkommen können kollabieren. Dies geschieht, wenn es keinen trennenden Inhalt zwischen ihnen gibt. Insbesondere tritt dies in zwei Hauptfällen auf:
- Der
margin-topeines Elternteils kollabiert mit demmargin-topseines ersten im Dokumentfluss befindlichen Nachkommens, es sei denn, der Elternteil hat einenborder-top,padding-top, enthält beliebigen Inline-Inhalt (wie Text) oder es wird clearance angewendet. - Der
margin-bottomeines Elternteils kollabiert mit demmargin-bottomseines letzten im Dokumentfluss befindlichen Nachkommens, es sei denn, der Elternteil hat eine definierteheightodermin-height, einenborder-bottomoderpadding-bottom.
In beiden Fällen verhindert das Erstellen eines neuen Block-Formatierungskontextes beim Elternteil ebenfalls, dass seine Ränder mit denen seiner Kinder kollabieren.
- Der
- Leere Blöcke
-
Wenn es keinen Rand, kein Padding, keinen Inline-Inhalt,
heightodermin-heightgibt, um denmargin-topeines Blocks von seinemmargin-bottomzu trennen, kollabieren seine oberen und unteren Ränder.
Einige Anmerkungen:
- Ein komplizierteres Zusammenfallen der Ränder (von mehr als zwei Rändern) tritt auf, wenn die obigen Fälle kombiniert werden.
- Diese Regeln gelten auch für Ränder, die null sind, sodass der Rand eines Nachkommen außerhalb seines Elternteils endet (entsprechend den obigen Regeln), unabhängig davon, ob der Rand des Elternteils null ist.
- Wenn negative Ränder einbezogen werden, ist die Größe des kollabierten Randes die Summe des größten positiven Randes und des kleinsten (negativsten) negativen Randes.
- Wenn alle Ränder negativ sind, ist die Größe des kollabierten Randes der kleinste (negativste) Rand. Dies gilt sowohl für benachbarte als auch für verschachtelte Elemente.
- Das Zusammenfallen der Ränder ist nur in vertikaler Richtung relevant.
- Ränder kollabieren nicht in einem Container mit
displayaufflexodergrid.
Beispiele
HTML
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
… with the top margin of this paragraph, yielding a margin of
<code>1.2rem</code> in between.
</p>
<div>
This parent element contains two paragraphs!
<p>
This paragraph has a <code>.4rem</code> margin between it and the text
above.
</p>
<p>
My bottom margin collapses with my parent, yielding a bottom margin of
<code>2rem</code>.
</p>
</div>
<p>I am <code>2rem</code> below the element above.</p>
CSS
div {
margin: 2rem 0;
background: lavender;
}
p {
margin: 0.4rem 0 1.2rem 0;
background: yellow;
}