Warum enthalten übergeordnete Elemente nicht immer konsistent untergeordnete Elementränder?

Inkonsistente Randeindämmung des übergeordneten Elements

Wenn ein Element mit einem Rand innerhalb eines anderen Elements platziert wird, wird das übergeordnete Element nicht immer konsistent umbrochen oder diesen Spielraum enthalten. Diese Inkonsistenz scheint kontraintuitiv zu sein, insbesondere im Vergleich zum Verhalten anderer Eigenschaften wie Rahmen, Position, Anzeige und Überlauf.

Überlappende Ränder und Kollaps

Intuitiv könnte man das vielleicht tun Gehen Sie davon aus, dass der Randkollaps, wie in der CSS-Spezifikation beschrieben, dieses Verhalten beeinflusst. Doch trotz des Fehlens überlappender Ränder und eines konsistenten Verhaltens in allen Browsern liegt die Wurzel dieser Inkonsistenz woanders.

Logik hinter der Randeindämmung

Die CSS-Spezifikation definiert tatsächlich dieses Verhalten, wenn auch mit einigen Widersprüchen. In den Spezifikationen werden sowohl „freie Ränder“ (Ränder, die über das übergeordnete Element hinausgehen) als auch „reduzierte Ränder“ (benachbarte Ränder, die sich überlappen) behandelt, ohne klar zu unterscheiden, unter welchen Bedingungen die einzelnen gelten.

Demo und Fazit

Die folgende Demo veranschaulicht dieses inkonsistente Verhalten:

<code class="html"><div class="block">
  <h2 id="Is-the-margin-contained-block">Is the margin contained (block)?</h2>
</div>
<div class="inline-block">
  <h2 id="Is-the-margin-contained-inline-block">Is the margin contained (inline-block)?</h2>
</div>
<div class="position-absolute">
  <h2 id="Is-the-margin-contained-position-absolute">Is the margin contained (position-absolute)?</h2>
</div>
<div class="overflow-auto">
  <h2 id="Is-the-margin-contained-overflow-auto">Is the margin contained (overflow-auto)?</h2>
</div>
<div class="border">
  <h2 id="Is-the-margin-contained-border">Is the margin contained (border)?</h2>
</div></code>

Die Inkonsistenz wird deutlich, wenn man das „Block“-Element (mit seinem Standard-Randverhalten) mit allen anderen vergleicht Elemente. Es scheint, dass alles außer dem Standardverhalten eines regulären Div davon ausgeht, dass der Rand im übergeordneten Element enthalten ist.

Dieses verworrene Verhalten ist auf die Mehrdeutigkeit in den CSS-Spezifikationen bezüglich Margin Collapse und Free Margins zurückzuführen. Leider liefert die Dokumentation keine klare Erklärung, wie diese Konzepte mit verschiedenen Elementeigenschaften wie Rahmen, Position und Überlauf interagieren.

Das obige ist der detaillierte Inhalt vonWarum enthalten übergeordnete Elemente nicht immer konsistent untergeordnete Elementränder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!