Beherrschung des Margin-Collapsing
Die oberen und unteren Ränder von Blockelementen werden manchmal zu einem einzigen Rand kombiniert (kollabiert), dessen Größe der größte der einzelnen Ränder ist (oder nur einer von ihnen, wenn sie gleich sind), ein Verhalten, das als Margin-Collapsing bekannt ist. Beachten Sie, dass die Ränder von schwebenden und absolut positionierten Elementen niemals kollabieren.
Margin-Collapsing tritt in drei grundlegenden Fällen auf:
- Benachbarte Geschwister
-
Die Ränder benachbarter Geschwister werden kollabiert (außer wenn das spätere Geschwisterelement über cleared Floats hinwegbewegt werden muss).
- Kein Inhalt, der Elternteil und Nachkomme trennt
-
Die vertikalen Ränder zwischen einem Eltern-Block und seinen Nachkommen können kollabieren. Dies geschieht, wenn kein trennender Inhalt zwischen ihnen vorhanden ist. Konkret tritt dies in zwei Hauptfällen auf:
- Der
margin-top
eines Elternteils kollabiert mit demmargin-top
seines ersten Nachkommens, es sei denn, der Elternteil hat eineborder-top
,padding-top
, enthält allgemeinen Inline-Inhalt (wie Text) oder es wird clearance angewendet. - Der
margin-bottom
eines Elternteils kollabiert mit demmargin-bottom
seines letzten Nachkommens, es sei denn, der Elternteil hat eine definierteheight
odermin-height
, eineborder-bottom
oderpadding-bottom
.
In beiden Fällen wird das Erstellen eines neuen Block Formatting Context am Elternteil verhindern, dass seine Ränder mit denen seiner Kinder kollabieren.
- Der
- Leere Blöcke
-
Wenn kein Rand, kein Padding, kein Inline-Inhalt, keine
height
odermin-height
vorhanden ist, die denmargin-top
eines Blocks von seinemmargin-bottom
trennt, dann kollabieren seine oberen und unteren Ränder.
Einige Anmerkungen:
- Komplexeres Margin-Collapsing (mit mehr als zwei Rändern) tritt auf, wenn die obigen Fälle kombiniert werden.
- Diese Regeln gelten auch für Ränder mit null, sodass der Rand eines Nachkommen nach außen seinen Elternteil verlässt (gemäß den obigen Regeln), unabhängig davon, ob der Rand des Elternteils null ist.
- Wenn negative Ränder involviert sind, ist die Größe des kollabierten Randes die Summe des größten positiven Randes und des kleinsten (am negativsten) negativen Randes.
- Wenn alle Ränder negativ sind, ist die Größe des kollabierten Randes der kleinste (am negativsten) Rand. Dies gilt sowohl für benachbarte als auch für geschachtelte Elemente.
- Margin-Collapsing ist nur relevant in vertikaler Richtung.
- Ränder kollabieren nicht in einem Container mit
display
aufflex
odergrid
.
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;
}