Wie kann verhindert werden, dass der Rand zwischen einem untergeordneten Div mit „margin-top' und einem übergeordneten Div ohne oberen Rand zusammenbricht?

CSS: Verwalten des oberen Rands, wenn dem übergeordneten Div der obere Rand fehlt

Wenn ein untergeordnetes Element einen oberen Rand hat und sein übergeordnetes Element keinen oberen Rand hat, wird das untergeordnete Der Rand des Elements kann zu visuellen Inkonsistenzen führen. Wie im bereitgestellten Bild dargestellt, scheint das orange Div das grüne Div nach unten zu drücken, obwohl letzteres keinen oberen Rand hat.

Um dieses Problem zu beheben, ohne dem übergeordneten Div einen Rahmen hinzuzufügen, können Sie Folgendes implementieren eine Lösung, die das Kollabieren der Marge verhindert. Das Reduzieren von Rändern ist ein CSS-Verhalten, das auftritt, wenn Ränder benachbarter Elemente (in diesem Fall die grünen und orangefarbenen Divs) zu einem einzigen Rand zusammenfallen.

Um das Reduzieren von Rändern zu verhindern, fügen Sie dem übergeordneten Element das folgende CSS hinzu:

overflow: auto;

Durch die Anwendung von overflow:auto auf .body im bereitgestellten CSS-Snippet wird verhindert, dass der Rand zusammenfällt, und die gewünschte visuelle Anordnung bleibt erhalten. Weitere Details zum Margenkollaps finden Sie in der W3C-Spezifikation: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass der Rand zwischen einem untergeordneten Div mit „margin-top' und einem übergeordneten Div ohne oberen Rand zusammenbricht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!