html – 在DIV中具有边距的子元素

我需要两个连续的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元素的边距更改为paddings来解决这个问题，但是我还需要使用头元素，列表元素以及我在div开头使用的任何其他元素。这是不可取的。

有人可以启发我：我错过了盒子模型的注意事项吗？有没有一个简单的方法来解决这个问题，最好是修改div的风格？

解决方法

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

* div和p的边缘“组合形成一个单一的边际”，尽管它们是嵌套的，因为它们之间具有相邻的边距，没有填充或边界。