Wie funktioniert die Reduzierung verschachtelter vertikaler Ränder in CSS?

Das Zusammenklappen verschachtelter vertikaler Ränder für CSS-Neulinge verstehen

Das Zusammenklappen verschachtelter vertikaler Ränder ist ein grundlegendes Konzept im CSS-Layout, das regelt, wie Ränder bei Elementen interagieren sind ineinander verschachtelt. Um es zu verstehen, untersuchen wir die Regeln, die dieses Verhalten bestimmen:

• Margin Collapse: Wenn zwei Ränder aufeinandertreffen, werden sie zu einem einzigen Rand zusammengelegt, wobei der zusammengeklappte Wert das Maximum darstellt der beiden einzelnen Ränder.
• Rand-Anschmiegen: Wenn nur der Rand ein verschachteltes Element von seinem enthaltenden Element trennt, „schmiegt“ sich das verschachtelte Element an den Anfang des enthaltenden Elements.
• Flussausnahme:Randkollaps und -anschmiegen gelten nicht für Elemente außerhalb des normalen Flusses, wie z. B. schwebende, absolut positionierte oder positionierte feste Elemente.

Berücksichtigen Sie Folgendes Folgendes Beispiel zur Veranschaulichung dieser Regeln:

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

Angesichts dieser Stile:

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

• Die äußeren und inneren Ränder werden zusammengeklappt, weil sie sich berühren, was zu einem kombinierten Rand von 20 Pixeln führt.
• Das innere Div schmiegt sich an die Oberseite des äußeren Div, da sie durch nichts getrennt werden.

Allerdings ist die kleinste Änderung, wie das Hinzufügen eines geschützten Leerzeichens zwischen den Elementen oder Wenn Sie dem inneren Div einen Rand geben, wird verhindert, dass die Ränder zusammenbrechen. Dies liegt daran, dass der Leerraum oder Rand eine Trennung zwischen den Rändern schafft.

Das Verständnis dieser Regeln ermöglicht es Entwicklern, das Layoutverhalten verschachtelter Elemente vorherzusagen und zu steuern und so eine browserübergreifende Konsistenz und vorhersehbare Ergebnisse sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie funktioniert die Reduzierung verschachtelter vertikaler Ränder in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!