Warum drückt Margin-Top übergeordnete Divs nach unten und wie kann ich das Problem beheben, ohne Rahmen zu verwenden?

So beheben Sie das Problem, dass der obere Rand das übergeordnete Div ohne Rand nach unten drückt

Wenn sich ein untergeordnetes Element mit einem oberen Rand innerhalb eines übergeordneten Elements ohne oberen Rand befindet, wird das margin kann das übergeordnete Element nach unten drücken. Dieses Verhalten ist oft unerwünscht. Eine Lösung besteht darin, dem übergeordneten Element einen oberen Rahmen hinzuzufügen, dies ist jedoch nicht immer möglich oder wünschenswert.

Eine alternative Lösung besteht darin, die Eigenschaft overflow: auto für das übergeordnete Element zu verwenden. Dadurch wird verhindert, dass der Rand zusammenfällt und das übergeordnete Element nach unten drückt. Hier ist ein Beispiel:

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

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

Mit dieser Änderung drückt das orange Div das grüne Div nicht mehr nach unten.

Das obige ist der detaillierte Inhalt vonWarum drückt Margin-Top übergeordnete Divs nach unten und wie kann ich das Problem beheben, ohne Rahmen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!