Was @BoltClock erwähnt hat, ist ziemlich solide. Und hier möchte ich nur einige weitere Lösungen für dieses Problem hinzufügen. Schau mal hier w3c_collapsing margin . Die grünen Teile sind der potenzielle Gedanke, wie dieses Problem gelöst werden kann.
Lösung 1
Die Ränder zwischen einem schwebenden Rahmen und einem anderen Rahmen werden nicht reduziert (auch nicht zwischen einem schwebenden Rahmen und seinen untergeordneten Rahmen).
das heißt, ich kann hinzufügen float:left entweder zu #outer o #inner Demo1 .
beachten Sie auch, dass float würde die auto am Rande.
Lösung 2
Die Ränder von Elementen, die neue Blockformatierungskontexte erstellen (wie z. B. Floats und Elemente mit einem anderen Überlauf als "sichtbar"), werden nicht mit ihren Inflow-Kindern reduziert.
andere als visible setzen wir overflow: hidden in #outer . Und dieser Weg scheint ziemlich einfach und anständig zu sein. Ich mag es.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Lösung 3
Die Ränder von absolut positionierten Boxen werden nicht kollabiert (auch nicht mit ihren In-Flow-Kindern).
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
o
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
werden diese beiden Methoden den normalen Fluss der div
Lösung 4
Die Ränder von Inline-Block-Boxen werden nicht kollabiert (auch nicht mit ihren Inflow-Kindern).
ist dasselbe wie @enderskill
Lösung 5
Der untere Rand eines fließenden Block-Level-Elements kollabiert immer mit dem oberen Rand seines nächsten fließenden Block-Level-Geschwisters, es sei denn, dieses Geschwister hat einen Abstand.
Dies hat nicht viel mit der Frage zu tun, da es sich um den kollabierenden Rand zwischen den Geschwistern handelt. es bedeutet im Allgemeinen, dass, wenn eine Top-Box margin-bottom: 30px und eine Geschwister-Box hat margin-top: 10px . Die Gesamtspanne zwischen ihnen beträgt 30px anstelle von 40px .
Lösung 6
Der obere Rand eines fließenden Blockelements kollabiert mit dem oberen Rand seines ersten fließenden Blockebenen-Kindes, wenn das Element keinen oberen Rand und keine obere Polsterung hat und das Kind keinen Abstand hat.
Das ist sehr interessant, und ich kann nur eine obere Grenzlinie hinzufügen
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Und auch <div> ist standardmäßig Block-Level, so dass Sie nicht haben, um es absichtlich zu deklarieren. Es tut mir leid, dass ich nicht mehr als 2 Links und Bilder posten kann, da ich ein Anfänger bin. Wenigstens wissen Sie, woher das Problem kommt, wenn Sie das nächste Mal etwas Ähnliches sehen.
