Elementy potomne z marginesami w DIV
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
?