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

那是expected behavior *。有几种方法可以解决它。如果浮动div，它们将包含子元素的边距并防止边距折叠。另一种方法是为div添加边框或填充。

* div的边距和p“组合成一个边距”，即使它们是嵌套的，因为它们具有相邻的边距，它们之间没有填充或边框。

Answer 3

解决方案1 ​​

向包含div添加overflow：hidden / auto以防止边距折叠。

解决方案2

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

新解决方案

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

Answer 4

在div元素上设置正填充和相应的负边距似乎可以解决问题，但我不知道为什么。

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