Das Beherrschen von Margin-Zusammenstoß

Die oberen und unteren Ränder von Blöcken werden manchmal zu einem einzigen Rand zusammengefasst (zusammengeklappt), dessen Größe die größte der einzelnen Ränder ist (oder nur einer davon, wenn sie gleich sind). Dieses Verhalten wird als Margin-Zusammenstoß bezeichnet. Beachten Sie, dass die Ränder von schwebenden und absolut positionierten Elementen niemals kollabieren.

Margin-Zusammenstoß tritt in drei grundlegenden Fällen auf:

Angrenzende Geschwister

Die Ränder von angrenzenden Geschwisterelementen werden zusammengeklappt (außer wenn das spätere Geschwisterelement past-Floats freigeräumt werden muss).

Kein Inhalt zwischen Eltern und Nachkommen

Wenn es keinen Rahmen, kein Padding, keinen Inline-Teil, keinen Block-Formatierungskontext oder Freiraum gibt, um den margin-top eines Blocks von dem margin-top eines oder mehrerer seiner Nachkommenblöcke zu trennen; oder keinen Rahmen, kein Padding, keinen Inline-Inhalt, height oder min-height, um den margin-bottom eines Blocks von dem margin-bottom eines oder mehrerer seiner Nachkommenblöcke zu trennen, dann kollabieren diese Ränder. Der zusammengeschlossene Rand endet außerhalb des Elternteils.

Leere Blöcke

Wenn es keinen Rahmen, kein Padding, keinen Inline-Inhalt, height oder min-height gibt, um den margin-top eines Blocks von seinem margin-bottom zu trennen, dann kollabieren seine oberen und unteren Ränder.

Einige Dinge, die zu beachten sind:

• Komplexere Margin-Zusammenstöße (von mehr als zwei Rändern) treten auf, wenn die oben genannten Fälle kombiniert werden.
• Diese Regeln gelten auch für Ränder, die Null sind, sodass der Rand eines Nachkommen (entsprechend den obigen Regeln) außerhalb seines Elternteils endet, unabhängig davon, ob der Rand des Elternteils Null ist oder nicht.
• Wenn negative Ränder beteiligt sind, ist die Größe des zusammengeschlossenen Randes die Summe des größten positiven Randes und des kleinsten (am meisten negativen) negativen Randes.
• Wenn alle Ränder negativ sind, ist die Größe des zusammengeschlossenen Randes der kleinste (am meisten negative) Rand. Dies gilt sowohl für angrenzende als auch für verschachtelte Elemente.
• Das Zusammenstoßen von Rändern ist nur in vertikaler Richtung relevant.
• In einem Container mit display auf flex oder grid gesetzt, kollabieren die Ränder nicht.

<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>

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

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