Beherrschung des Margin-Zusammenfalls

Die oberen und unteren Ränder von Blöcken werden manchmal zu einem einzelnen Rand kombiniert (zusammengefallen), dessen Größe die größte der einzelnen Ränder ist (oder nur einer von ihnen, wenn sie gleich sind). Dieses Verhalten wird als Margin-Zusammenfall bezeichnet. Beachten Sie, dass die Ränder von floatenden und absolut positionierten Elementen niemals zusammenfallen.

Margin-Zusammenfall tritt in drei grundlegenden Fällen auf:

Benachbarte Geschwister

Die Ränder benachbarter Geschwister fallen zusammen (außer wenn das nachfolgende Geschwister über Floats gecleared werden muss).

Kein Inhalt trennt Eltern- und Nachkommenelemente

Die vertikalen Ränder zwischen einem übergeordneten Block und seinen Nachkommen können zusammenfallen. Dies geschieht, wenn kein trennender Inhalt zwischen ihnen vorhanden ist. Konkret tritt dies in zwei Hauptfällen auf:

Der margin-top eines Elternteils fällt mit dem margin-top seines ersten in den Fluss eingebundenen Nachkommens zusammen, es sei denn, der Elternteil hat einen border-top, padding-top, enthält jeglichen Inline-Inhalt (wie Text) oder hat eine Clearance zugewiesen.
Der margin-bottom eines Elternteils fällt mit dem margin-bottom seines letzten in den Fluss eingebundenen Nachkommens zusammen, es sei denn, der Elternteil hat eine definierte height oder min-height, einen border-bottom oder padding-bottom.

In beiden Fällen wird durch das Erzeugen eines neuen Block-Formatierungskontexts beim Elternteil auch verhindert, dass seine Ränder mit denen seiner Kinder zusammenfallen.

Leere Blöcke

Wenn es keinen Rand, Puffer, 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 Ränder zusammen.

Einige Dinge, die zu beachten sind:

Komplexere Margin-Zusammenfälle (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 gemäß den oben genannten 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 zusammengefallenen 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 zusammengefallenen Randes der kleinste (am negativsten) Rand. Dies gilt sowohl für benachbarte als auch für verschachtelte Elemente.
Der zusammenfallende Rand ist nur in vertikaler Richtung relevant.
Ränder fallen in einem Container mit display, der auf flex oder grid gesetzt ist, nicht zusammen.

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden