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 dem margin-top seines ersten Nachkommens, es sei denn, der Elternteil hat eine border-top, padding-top, enthält allgemeinen Inline-Inhalt (wie Text) oder es wird clearance angewendet.
• Der margin-bottom eines Elternteils kollabiert mit dem margin-bottom seines letzten Nachkommens, es sei denn, der Elternteil hat eine definierte height oder min-height, eine border-bottom oder padding-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.

Leere Blöcke

Wenn kein Rand, kein Padding, kein Inline-Inhalt, keine height oder min-height vorhanden ist, die den margin-top eines Blocks von seinem margin-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 auf flex oder grid.

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