Beherrschung der Rand-Zusammenführung
Die oberen und unteren Ränder von Blöcken werden manchmal in einen einzigen Rand zusammengefasst, dessen Größe die größte der einzelnen Ränder ist (oder nur einer von ihnen, wenn sie gleich sind), ein Verhalten, das als Ränder-Zusammenführung bekannt ist. Beachten Sie, dass die Ränder von schwebenden und absolut positionierten Elementen niemals zusammenfallen.
Ränder-Zusammenführung tritt in drei grundlegenden Fällen auf:
- Benachbarte Geschwister
-
Die Ränder benachbarter Geschwister werden zusammengeführt (außer wenn für das letzte Geschwister clear gesetzt werden muss, um an Floats vorbeizukommen).
- Kein Inhalt zwischen Eltern und Nachkommen
-
Die vertikalen Ränder zwischen einem Elternblock und seinen Nachkommen können zusammenfallen. Dies geschieht, wenn es keinen trennenden Inhalt zwischen ihnen gibt. Insbesondere tritt dies in zwei Hauptfällen auf:
- Der
margin-topeines Elternteils fällt mit demmargin-topseines ersten Nachkommens im Fluss zusammen, es sei denn, der Elternteil hat einenborder-top,padding-top, enthält Inline-Inhalt (wie Text) oder hat Abstand angewendet. - Der
margin-bottomeines Elternteils fällt mit demmargin-bottomseines letzten Nachkommens im Fluss zusammen, es sei denn, der Elternteil hat eine definierteheightodermin-height, einenborder-bottom, oderpadding-bottom.
In beiden Fällen verhindert das Erstellen eines neuen Blockformatierungs-Kontextes auf dem Elternteil auch, dass seine Ränder mit seinen Kindern zusammenfallen.
- Der
- Leere Blöcke
-
Wenn es keine Grenze, kein Padding, keinen Inline-Inhalt,
heightodermin-heightgibt, um denmargin-topeines Blocks von seinemmargin-bottomzu trennen, fallen seine oberen und unteren Ränder zusammen.
Einige Anmerkungen:
- Eine komplexere Ränder-Zusammenführung (von mehr als zwei Rändern) tritt auf, wenn die oben genannten Fälle kombiniert werden.
- Diese Regeln gelten selbst für Ränder, die null sind, sodass der Rand eines Nachkommens außerhalb seines Elternteils landet (gemäß den oben genannten Regeln), unabhängig davon, ob der Rand des Elternteils null ist oder nicht.
- Wenn negative Ränder beteiligt sind, ist die Größe des zusammengeführten Randes die Summe aus dem größten positiven Rand und dem kleinsten (negativsten) negativen Rand.
- Wenn alle Ränder negativ sind, ist die Größe des zusammengeführten Randes der kleinste (negativste) Rand. Dies gilt sowohl für benachbarte Elemente als auch für verschachtelte Elemente.
- Das Zusammenfallen von Rändern ist nur in der vertikalen Richtung relevant.
- Ränder fallen in einem Container mit
displayaufflexodergridnicht zusammen.
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;
}