Beherrschung des Zusammenfallens von Rändern
Die obersten und untersten Ränder von Blöcken werden manchmal zu einem einzigen Rand kombiniert (zusammengefallen), dessen Größe die größte der einzelnen Ränder ist (oder nur einer von ihnen, wenn sie gleich sind), ein Verhalten, das als Zusammenfallen von Rändern bekannt ist. Beachten Sie, dass die Ränder von schwebenden und absolut positionierten Elementen nie zusammenfallen.
Das Zusammenfallen von Rändern tritt in drei grundlegenden Fällen auf:
- Angrenzende Geschwister
-
Die Ränder angrenzender Geschwister fallen zusammen (außer wenn das letzte Geschwister um Floats zu klären muss).
- Kein Inhalt zwischen Eltern und Nachkommen
-
Die vertikalen Ränder zwischen einem Elternblock und seinen Nachkommen können zusammenfallen. Dies geschieht, wenn es keinen separierenden Inhalt zwischen ihnen gibt. Insbesondere tritt dies in zwei Hauptfällen auf:
- Der
margin-topeines Elternteils fällt mit demmargin-topseines ersten im Fluss befindlichen Nachkommens zusammen, es sei denn, das Elternteil hat eineborder-top,padding-top, enthält jeglichen Inline-Inhalt (wie Text) oder hat Klärung angewendet. - Der
margin-bottomeines Elternteils fällt mit demmargin-bottomseines letzten im Fluss befindlichen Nachkommens zusammen, es sei denn, das Elternteil hat eine definierteheight,min-height, eineborder-bottomoderpadding-bottom.
In beiden Fällen verhindert das Erstellen eines neuen Blockformatierungskontextes auf dem Elternteil auch, dass seine Ränder mit denen seiner Kinder zusammenfallen.
- Der
- Leere Blöcke
-
Wenn kein Rand, Abstand, Inline-Inhalt,
heightodermin-heightvorhanden ist, um denmargin-topeines Blocks von seinemmargin-bottomzu trennen, dann fallen seine oberen und unteren Ränder zusammen.
Einige Dinge, die zu beachten sind:
- Komplexeres Zusammenfallen von Rändern (von mehr als zwei Rändern) tritt auf, wenn die oben genannten Fälle kombiniert werden.
- Diese Regeln gelten auch für Ränder, die Null sind, sodass der Rand eines Nachkommens außerhalb seines Elternteils endet (gemäß den obigen Regeln), unabhängig davon, ob der Rand des Elternteils Null ist oder nicht.
- Wenn negative Ränder beteiligt sind, ist die Größe des zusammengefallenen 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 zusammengefallenen Randes der kleinste (negativste) Rand. Dies gilt sowohl für benachbarte als auch für verschachtelte Elemente.
- Das Zusammenfallen von Rändern ist nur in vertikaler Richtung relevant.
- In einem Container mit
displayaufflexodergridwerden Ränder nicht zusammenfallen.
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;
}