Beherrschung des Kollabierens von Rändern
Die oberen und unteren Ränder von Blöcken werden manchmal zu einem einzigen Rand kombiniert (kollabiert), dessen Größe der größte der individuellen Ränder ist (oder nur einer von ihnen, wenn sie gleich sind), ein Verhalten, das als Kollabieren von Rändern bekannt ist. Beachten Sie, dass die Ränder von schwebenden und absolut positionierten Elementen niemals kollabieren.
Das Kollabieren von Rändern tritt in drei grundlegenden Fällen auf:
- Benachbarte Geschwister
-
Die Ränder benachbarter Geschwister werden kollabiert (außer wenn das spätere Geschwisterelement an Schwebeflächen vorbei gelöscht werden muss).
- Kein Inhalt zwischen Elternteil und Nachkommen
-
Wenn es keine Umrandung, kein Padding, keinen Inline-Teil, keinen Blockformatierungskontext gibt, der erstellt wird, oder kein Abstand, um das
margin-top
eines Blocks vommargin-top
eines oder mehrerer seiner Nachkommenblöcke zu trennen; oder keine Umrandung, kein Padding, kein Inline-Inhalt, keineheight
, odermin-height
, um dasmargin-bottom
eines Blocks vommargin-bottom
eines oder mehrerer seiner Nachkommenblöcke zu trennen, dann kollabieren diese Ränder. Der kollabierte Rand landet außerhalb des Elternteils. - Leere Blöcke
-
Wenn es keine Umrandung, kein Padding, keinen Inline-Inhalt, keine
height
, odermin-height
gibt, um dasmargin-top
eines Blocks von seinemmargin-bottom
zu trennen, dann kollabieren seine oberen und unteren Ränder.
Einige Dinge, die zu beachten sind:
- Komplexeres Kollabieren von Rändern (mehr als zwei Ränder) tritt auf, wenn die obigen Fälle kombiniert werden.
- Diese Regeln gelten sogar für Ränder, die null sind, sodass der Rand eines Nachkommen außerhalb seines Elternteils (gemäß den obigen Regeln) endet, unabhängig davon, ob der Rand des Elternteils null ist oder nicht.
- Wenn negative Ränder beteiligt sind, 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 Kollabieren von Rändern ist nur in der vertikalen Richtung relevant.
- Ränder kollabieren nicht in einem Container mit
display
aufflex
odergrid
gesetzt.
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;
}