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

这是expected behavior *。有几种方法可以避开它。如果浮动div，它们将包含子元素的边距并防止边缘塌陷。另一种方法是向div添加边框或填充。

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

Answer 2

添加overflow: hidden或overflow: auto到div

Answer 3

设置了积极的填充，和div元件上的相应的负利润率似乎解决这个问题，但我不知道为什么。

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

Answer 4

解决方案1 ​​

添加溢出：隐藏/汽车到包含div防止保证金崩溃。

溶液2

到内含div和等于负余量积极添加填充到内部元件

新解法

的0.01px添加填充到内含div，这将防止边缘崩溃，但不会在内部元素上需要任何负边界。