Wie kollabieren verschachtelte Ränder und wann verhindern sie, dass sie kollabieren?

Grundlegendes zum Zusammenbruch verschachtelter vertikaler Ränder

Viele Entwickler haben Probleme mit dem Konzept des Zusammenbruchs vertikaler Ränder in verschachtelten Elementen. Vereinfachen wir dieses Konzept für Anfänger.

Stellen Sie sich zwei verschachtelte Divs vor:

<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div> 

Zunächst hat der 20-Pixel-Rand des inneren Divs Vorrang. Es gibt jedoch zwei wichtige Regeln, die Sie beachten sollten:

1. Bei Berührung einklappen:
Wenn sich die Ränder benachbarter Elemente berühren, werden sie eingeklappt.

2. Nesting Snuggle:
Wenn nur ein Rand verschachtelte Elemente trennt, „schmiegt“ sich das innere Element an das äußere Element.

Anwenden dieser Regeln auf unser Beispiel:

• Die Ränder der verschachtelten Divs berühren sich und lösen einen Rand aus kollabieren.
• Das innere Div schmiegt sich an die Oberkante des äußeren Div, obwohl es einen größeren Rand hat.

Somit wendet der Gesamtblock das Maximum der kollabierenden Ränder (20 Pixel) an die gesamte Abteilung.

Ausnahmen von der Reduzieren:

Das Verhalten beim Reduzieren des Rands ändert sich jedoch, wenn:

• Es gibt einen Rand oder eine Polsterung zwischen den Elementen.
• Das innere Element ist nicht wirklich vorhanden verschachtelt (z. B. schwebend oder absolut positioniert).

Beispiel für Nr Reduzieren:

Das Hinzufügen eines geschützten Leerraums (oder Rahmens) trennt die Ränder und verhindert so ein Reduzieren:

<div id="outer"> 
<div id="inner">
A
</div>
</div>

In diesem Fall beträgt der Rand des inneren Divs (20 Pixel). wird auf seinen eigenen Raum angewendet, und der Rand des äußeren Div (10 Pixel) gilt für den umgebenden Bereich.

Durch das Verständnis dieser Regeln und Ausnahmen, Sie können jetzt den Abstand von Elementen mit verschachtelten Rändern effektiv steuern.

Das obige ist der detaillierte Inhalt vonWie kollabieren verschachtelte Ränder und wann verhindern sie, dass sie kollabieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!