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

Question

给定以下标记:

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

为段落元素设置 margin: 10px 应该适用于顶部和底部，对吗？

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

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 中，两个或多个框(可能是也可能不是兄弟)的相邻边距可以合并形成一个边距。以这种方式合并的边距称为折叠边距，由此产生的合并边距称为折叠边距。

相邻的垂直边距折叠，除了:

• 根元素框的边距不会折叠。
• 如果一个元素的顶部和底部边距有间隙 是相邻的，它的边距会与后续兄弟的相邻边距折叠，但产生的边距不会与父 block 的底部边距折叠。

由于您的外部 DIV 没有“ float ”.. 内部元素的上边距 <p>第一个将折叠为 0，然后将其他折叠为最小间距 <p>标签。

只是'float:left;width:100% ' 您的 div 将解决您的问题。

Margin-collapsing w3c reference