Warum erstreckt sich der obere Rand eines untergeordneten Elements über ein grenzenloses übergeordnetes Element hinaus?

Einrückung am oberen Rand, wenn dem übergeordneten Element ein Rand fehlt

Wenn Sie auf ein Szenario stoßen, in dem ein Element mit einem oberen Rand über die Grenzen von hinausragt Sein übergeordnetes Element, das keinen oberen Rand hat, kann verwirrend sein. Diese Einrückung kann zu unerwünschten Abständen in Layouts führen.

In diesem speziellen Beispiel ist ein orangefarbenes Div in einem grünen Div verschachtelt, das keinen oberen Rand hat. Obwohl das orangefarbene Div einen oberen Rand von 30 Pixeln hat, ragt es unter sein übergeordnetes Element hinaus.

Um dieses Problem zu beheben, besteht eine mögliche Lösung darin, einen oberen Rand zum grünen Div einzuführen. Dies ist jedoch möglicherweise nicht möglich, wenn eine randlose Oberkante eine Designanforderung ist.

Ein alternativer Ansatz besteht darin, „overflow: auto“ auf das grüne Div (.body) anzuwenden. Diese Technik verhindert das Zusammenbrechen der Ränder zwischen Elementen und hält das orangefarbene Div effektiv innerhalb der Grenzen seines übergeordneten Elements.

Der folgende CSS-Codeausschnitt demonstriert die Implementierung dieser Lösung:

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

Durch die Anwendung dieser Behebung: Das orangefarbene Div wird nicht mehr über das grüne Div hinaus eingerückt, sodass das Layout seinen beabsichtigten Abstand beibehält.

Das obige ist der detaillierte Inhalt vonWarum erstreckt sich der obere Rand eines untergeordneten Elements über ein grenzenloses übergeordnetes Element hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!