Wie funktioniert die vertikale Randreduzierung bei verschachtelten Elementen in CSS?

Verstehen des Zusammenklappens verschachtelter vertikaler Ränder

Das Konzept des Zusammenklappens vertikaler Ränder in CSS kann verwirrend sein, insbesondere beim Verschachteln von Elementen. Lassen Sie uns die Mechanik mit einer vereinfachten Erklärung aufschlüsseln.

Zwei wesentliche Regeln regeln die Randkollaps:

1. Berührende Ränder Kollaps: Wenn sich die vertikalen Ränder benachbarter Elemente berühren , fallen sie zu einem einzigen Rand zusammen.
2. Verschachteltes Aneinanderreihen: Wenn nur der Rand verschachtelte Elemente trennt, „schmiegen“ sie sich aneinander und beseitigen jeglichen Raum, der durch den Rand des inneren Elements entsteht.

Bedenken Sie die folgende HTML-Struktur:

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

Und die anfänglichen CSS-Stile:

<code class="CSS">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}

#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

In diesem Szenario löst der Rand des verschachtelten Div (20 Pixel) einen Randeinbruch aus mit dem Rand des äußeren Divs (10 Pixel), was zu einem Gesamtrand von 20 Pixeln für den gesamten Block führt. Das innere Div schmiegt sich dann an den Anfang des Containers, da es keine randlose Trennung gibt.

Wenn wir jedoch irgendeine Trennung zwischen den Rändern einführen, etwa einen Rand oder sogar ein geschütztes Leerzeichen , der Zusammenbruch ist gebrochen. Dies liegt daran, dass Ränder, die nicht mehr als „berührend“ gelten, nicht zusammenfallen.

Beachten Sie, dass diese Regeln nicht für Elemente außerhalb des regulären Flusses gelten (z. B. schwebende oder absolut positionierte Elemente). Das Verstehen dieser Konzepte wird Ihnen helfen, ein klares Verständnis dafür zu entwickeln, wie sich vertikale Ränder beim Verschachteln von Elementen in CSS verhalten.

Das obige ist der detaillierte Inhalt vonWie funktioniert die vertikale Randreduzierung bei verschachtelten Elementen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!