Beherrschung des Zusammenfallens von Außenabständen

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

Das Zusammenfallen von Außenabständen tritt in drei grundlegenden Fällen auf:

Benachbarte Geschwister

Die Abstände benachbarter Geschwister fallen zusammen (außer wenn das nachfolgende Geschwister über Floats geklärt werden muss).

Kein Inhalt zwischen Eltern und Nachkommen

Wenn es keine Umrandung, Füllung, Inline-Element, Blockformatierungskontext gibt oder keine Klärung, die den margin-top eines Blocks vom margin-top eines oder mehrerer seiner Nachkommen trennt; oder keine Umrandung, Füllung, Inline-Inhalt, height oder min-height, die den margin-bottom eines Blocks vom margin-bottom eines oder mehrerer seiner Nachkommen trennt, dann fallen diese Abstände zusammen. Der zusammengefallene Abstand befindet sich außerhalb des Elternteils.

Leere Blöcke

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

Einige Dinge zu beachten:

• Ein komplexeres Zusammenfallen von Abständen (von mehr als zwei Abständen) tritt auf, wenn die obigen Fälle kombiniert werden.
• Diese Regeln gelten sogar für Abstände, die null sind, sodass der Abstand eines Nachkommens außerhalb seines Elternteils endet (entsprechend den obigen Regeln), unabhängig davon, ob der Abstand des Elternteils null ist oder nicht.
• Wenn negative Abstände beteiligt 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.
• Das Zusammenfallen von Abständen ist nur in der vertikalen Richtung relevant.
• Abstände fallen nicht in einem Container mit display auf flex oder grid zusammen.

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