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 vom margin-top eines oder mehrerer seiner Nachkommenblöcke zu trennen; oder keine Umrandung, kein Padding, kein Inline-Inhalt, keine height, oder min-height, um das margin-bottom eines Blocks vom margin-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, oder min-height gibt, um das margin-top eines Blocks von seinem margin-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 auf flex oder grid gesetzt.

Beispiele

HTML

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

css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

Ergebnis

Siehe auch