Untergeordnete Elemente mit Rändern innerhalb von DIVs

Ich brauche zwei aufeinanderfolgende div Elemente (mit Hintergründen) nahtlos untereinander berühren. Dieses Layout bricht jedoch, wenn ich ein Kind setze p Element in den Boden div. Die Ränder der p Element erzwingt eine Lücke zwischen beiden div Elemente. Das ist ein seltsames Verhalten, da ich die Marge von der erwarte p im Inhalts- und Hintergrundbereich der zu bleiben div. Es wird auf Firefox, Chrome und IE 8 auf die gleiche Weise gerendert.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc"><p>Bottom Div</p></div>

So sieht es aus.

Ich könnte dies beheben, indem ich die Ränder in Polsterungen für die ändere p -Element, aber dann müsste ich dies auch mit Header-Elementen, Listenelementen und jedem anderen Element tun, das ich am Anfang von a verwenden möchte div. Das ist nicht wünschenswert.

Könnte mich jemand aufklären: Welche Einschränkung des Box-Modells vermisse ich? Gibt es eine einfache Möglichkeit, dies zu beheben, vorzugsweise durch Ändern des Stils der div?

Hinzufügen overflow: hidden oder overflow: auto zum div

Das ist die erwartetes Verhalten*. Es gibt ein paar Möglichkeiten, es zu umgehen. Wenn Sie die Divs floaten, enthalten sie die Ränder der untergeordneten Elemente und verhindern, dass der Rand zusammenfällt. Ein anderer Ansatz besteht darin, den Divs einen Rahmen oder eine Auffüllung hinzuzufügen.

* Die Ränder des div und des p “verbinden sich zu einem einzigen Rand”, obwohl sie verschachtelt sind, weil sie benachbarte Ränder ohne Polsterung oder Grenze dazwischen haben.

Lösung 1

Fügen Sie overflow: hidden/auto zum enthaltenden div hinzu, um zu verhindern, dass der Rand zusammenbricht.

Lösung 2

Fügen Sie dem enthaltenden div eine positive Auffüllung und dem inneren Element einen gleichen negativen Rand hinzu

Neue Lösung

Fügen Sie dem enthaltenden div eine Auffüllung von 0,01 Pixel hinzu. Dadurch wird verhindert, dass der Rand zusammenfällt, es wird jedoch kein negativer Rand für das innere Element benötigt.

Festlegen einer positiven Polsterung und einer entsprechenden negativen Marge auf der div element scheint das Problem zu beheben, obwohl ich nicht weiß warum.

<div style="background: #ccccff">Top Div</div>
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div>