为段落元素提供边距实际上并不适用于父div

Question

给出以下标记：

<div>
    <p>Test test</p>
</div>

将margin: 10px设置为paragraph元素应该适用于top和bottom，对吗？

我有一个简单的例子，我不太清楚为什么它不起作用。

http://jsbin.com/URumOFup/2/edit?html,css,output

---

如果我给div overflow: hidden规则，我的预期就行了。有人可以解释为什么会发生这种情况，如果使用overflow: hidden是适用p边距的正确方法吗？

Answer 1

The general meaning of "margin" isn't to convey "move this over by 10px" but rather, "there must be 10px of empty space beside this element."

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

相邻的垂直边距会崩溃，除了：

• 根元素框的边距不会崩溃。
• 如果元素与间隙的顶部和底部边距相邻，则其边距会随着后续兄弟的邻接边缘而折叠，但所产生的边距不会随着父块的下边距而崩溃。

由于您的外部DIV没有浮动＆＃39; ..内部元素<p>的上边距将为第一个折叠为0，然后折叠为其他<p>标记的最小间距。

Just＆＃39; float:left;width:100%＆＃39;你的div会解决你的问题。

Margin-collapsing w3c reference