DIV中具有边距的子元素

Question

我需要两个连续的div元素(有背景)无缝接触,一个在另一个之下.但是,当我将子p元素放入底部时,此布局会中断div.p元素的边缘迫使两个div元素之间存在空白.这是一种奇怪的行为,因为我期望p保留在内容和背景区域内div.它在Firefox,Chrome和IE 8上呈现相同的方式.

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

这是它的样子.

我可以通过将边距更改为p元素的填充来解决这个问题,但是我还必须使用标题元素,列表元素以及我想在开头使用的任何其他元素来执行此操作div.这是不可取的.

有人可以启发我:我错过了盒子模型的警告吗？有没有一种简单的方法可以解决这个问题,最好是通过修改它的风格div？

Answer 1

添加overflow: hidden或overflow: auto到div

Answer 2

这是预期的行为*.有几种方法可以解决它.如果浮动div,它们将包含子元素的边距并防止边距折叠.另一种方法是为div添加边框或填充.

*div的边距和p"组合形成一个边距",即使它们是嵌套的,因为它们具有相邻的边距,它们之间没有填充或边界.

Answer 3

解决方案1

添加溢出:隐藏/自动到包含div以防止边距折叠.

解决方案2

将正填充添加到包含div并且与内部元素相等的负边距

新解决方案

向包含div添加0.01px的填充,这将防止边距折叠,但内部元素上不需要任何负边距.