Potrzebuję dwóch kolejnychdiv elementy (z tłem), które mają się stykać płynnie, jeden pod drugim. Jednak ten układ łamie się, gdy kładę dzieckop element na dnodiv. Marginesyp element wymusza pustą lukę między obydwomadiv elementy. To dziwne zachowanie, ponieważ oczekuję marginesup pozostać w treści i obszarze tładiv. Renderuje w ten sam sposób na Firefox, Chrome i IE 8.

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

Oto jak to wygląda.

Mogę to naprawić, zmieniając marginesy na paddings dlap element, ale potem musiałbym to zrobić również z elementami nagłówka, elementami listy i innymi elementami, których chcę użyć na początkudiv. To nie jest pożądane.

Czy ktoś mógłby mnie oświecić: jakie zastrzeżenie modelu pudełkowego zaginęło? Czy istnieje prosty sposób, aby to naprawić, najlepiej modyfikując styldiv?