Beherrschen des Zusammenfallens von Abständen

Die oberen und unteren Abstände von Blöcken werden manchmal zu einem einzigen Abstand kombiniert (zusammengefallen), dessen Größe die größte der einzelnen Abstände ist (oder einfach einer von ihnen, wenn sie gleich sind), ein Verhalten, das als Zusammenfallen von Abständen bekannt ist. Beachten Sie, dass die Abstände von schwebenden und absolut positionierten Elementen niemals zusammenfallen.

Das Zusammenfallen von Abständen tritt in drei grundlegenden Fällen auf:

Angrenzende Geschwister

Die Abstände von angrenzenden Geschwisterelementen fallen zusammen (außer wenn das letzte Geschwisterelement an den Schwebepunkten vorbeigeräumt (cleared) werden muss).

Kein Inhalt trennt Eltern und Nachkommen

Wenn es keine Umrandung, keine Auffüllung, keinen Inline-Teil, keinen Block-Formatierungskontext erzeugt, oder keine Räumung (Clearance) gibt, um den margin-top eines Blocks von dem margin-top eines oder mehrerer seiner Nachkommenblöcke zu trennen; oder keine Umrandung, Auffüllung, 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 fallen diese Abstände zusammen. Der zusammengefallene Abstand befindet sich außerhalb des Elternblocks.

Leere Blöcke

Wenn es keine Umrandung, Auffüllung, Inline-Inhalt, height, oder min-height gibt, um den margin-top eines Blocks von seinem margin-bottom zu trennen, dann fallen seine oberen und unteren Abstände zusammen.

Einige Dinge zu beachten:

• Komplexeres Zusammenfallen von Abständen (von mehr als zwei Abständen) tritt auf, wenn die oben genannten Fälle kombiniert werden.
• Diese Regeln gelten auch für Abstände, die null sind, sodass der Abstand eines Nachkommen außerhalb seines Elternblocks endet (gemäß den oben genannten Regeln), unabhängig davon, ob der Abstand des Elternblocks null ist oder nicht.
• Wenn negative Abstände involviert sind, ist die Größe des zusammengefallenen Abstands die Summe des größten positiven Abstands und des kleinsten (negativsten) negativen Abstands.
• Wenn alle Abstände negativ sind, ist die Größe des zusammengefallenen Abstands der kleinste (negativste) Abstand. Dies gilt sowohl für benachbarte als auch für verschachtelte Elemente.
• Zusammenfallende Abstände sind nur in der vertikalen Richtung relevant.
• Abstände fallen nicht in einem Container zusammen, bei dem display auf flex oder grid gesetzt ist.

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