Wie funktionieren verschachtelte vertikale Randausblendungen in CSS?

Die Nuancen verschachtelter vertikaler Randkollabierungen verstehen

In CSS spielt das Konzept der Randkollabierung eine entscheidende Rolle bei der Bestimmung des Abstands zwischen Elementen auf einer Webseite. Wenn sich Ränder vertikal benachbarter Elemente berühren, werden sie zu einem einzigen Rand zusammengelegt, was zu unerwartetem Verhalten führt. Verschachtelte vertikale Randeinbrüche erschweren dieses Verhalten zusätzlich.

Mechanismus der verschachtelten Randeinbrüche

Wenn zwei Elemente ineinander verschachtelt sind und sich ihre Ränder berühren , gelten die folgenden zwei Regeln:

1. Randkollaps: Die Ränder werden zu einem einzigen Rand mit der maximalen Höhe der einzelnen Ränder zusammengelegt.
2. Anschmiegen:Das innere Element „schmiegt“ sich an den oberen Rand seines Containers und eliminiert so jeglichen Abstand zwischen den Elementen.

Bedenken Sie beispielsweise das folgende HTML und CSS :

<code class="html"><div id="outer">
  <div id="inner">
    A
  </div>
</div></code>

<code class="css">#outer {
  margin-top: 10px;
  background: blue;
  height: 100px;
}
#inner {
  margin-top: 20px;
  background: red;
  height: 33%;
  width: 33%;
}</code>

In diesem Fall reduzieren sich die Ränder auf 20 Pixel (das Maximum von 10 Pixel und 20 Pixel) und das innere Div schmiegt sich an die Oberseite des äußeren Div.

Wenn jedoch ein Inhalt oder ein Rand die beiden Ränder trennt, geht die Ausblendung verloren. Dies kann auftreten, wenn geschützte Leerzeichen oder eine Grenze zwischen den Elementen hinzugefügt werden, wie unten gezeigt:

<code class="html"><div id="outer">
  <div id="inner">
     
    A
  </div>
</div></code>

Hinweis: Dieses Verhalten gilt nicht für Elemente, die als absolute, feste, oder schwebend.

Das obige ist der detaillierte Inhalt vonWie funktionieren verschachtelte vertikale Randausblendungen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!