Warum expandieren vertikale vertikale Ränder nicht den übergeordneten Container?

Question

Ich bin auf einen Fall gestoßen, wo ich einen Kinderrand brauche, um einen Elterncontainer zu erweitern. Ich habe festgestellt, dass der Bereich außerhalb des übergeordneten Elements zugewiesen ist, das übergeordnete Element selbst jedoch nicht erweitert ist. Ich fand dann, dass durch das Hinzufügen von `overflow: hidden 'zum Eltern könnte ich dieses Problem beheben.

Kann jemand etwas Licht auf warum dies der Fall ist?

UPDATE:

ich gefunden habe, dass die Mutter jede Polsterung oder Randwert auch das Hinzufügen diesen fixiert.

Updated Example

Answer 1

Die Antwort auf "Warum" wird beschrieben gut und prägnant here. Es gibt bestimmte Eigenschaften, die eine "block formatting context" festlegen. Nämlich:

Floats, absolut [und befestigt] positionierte Elemente Block Behälter (wie inline-Blöcke, tabellen Zellen und tabellen Bildunterschriften), die nicht Boxen ist Block und Block-Box mit ‚Überlauf 'außer' visible '(außer , wenn dieser Wert in das Ansichtsfenster übernommen wurde), erstellen Sie neue Blockformatierungskontexte für deren Inhalt.

Es ist diese Veränderung der Blockforma Zusammenhang, dass der Grund dafür ist, warum solche Lösungen, wie oben in der Arbeits Anmerkungen gegeben, wie margin (und im Fall von a float vorhergehenden, padding des einströmenden Elemente folgende) betreibt .

Answer 2

denke ich Margen Kollabieren der Grund ist: http://www.w3.org/TR/CSS2/box.html#collapsing-margins