Wie kann ich verhindern, dass sich der Rand eines untergeordneten Teils auf die Größe eines grenzenlosen übergeordneten Teils auswirkt?

CSS: Margin-Top und Borderless Parent Div

In dem beschriebenen Szenario wird ein untergeordnetes orangefarbenes Div mit einem 30 Pixel großen oberen Rand darin festgelegt ein grünes übergeordnetes Div, dem ein oberer Rand fehlt. Das Problem tritt auf, wenn der Rand das übergeordnete Div nach unten drückt, obwohl ein oberer Rand nicht erwünscht ist.

Um dieses Problem zu beheben und gleichzeitig das randlose übergeordnete Div beizubehalten, sollten Sie Folgendes implementieren:

.body {
    overflow: auto;
}

Durch das Hinzufügen von „overflow: auto“ zum übergeordneten Div „.body“ rufen Sie das Verhalten des Browsers beim Reduzieren von Rändern auf. Dadurch kann der obere Rand des untergeordneten Divs im übergeordneten Div enthalten sein, ohne über dessen Grenzen hinauszuragen.

Dieser Ansatz stellt sicher, dass das grüne Div randlos bleibt und gleichzeitig verhindert, dass der Rand zusammenbricht, was eine korrekte Positionierung des untergeordneten orangefarbenen Div ermöglicht ohne unerwünschte Verschiebungen in der Höhe des übergeordneten Divs zu verursachen.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass sich der Rand eines untergeordneten Teils auf die Größe eines grenzenlosen übergeordneten Teils auswirkt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!