我需要两个连续的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开头使用的任何其他元素。这是不可取的。
解决方法
那就是
expected behavior *。有几种方法可以解决它。如果您浮动div，它们将包含子元素的边距并防止边缘折叠。另一种方法是向div添加边框或填充。
* div和p的边缘“组合形成一个单一的边际”，尽管它们是嵌套的，因为它们之间具有相邻的边距，没有填充或边界。
