html - 内边距影响 边距

Question

我有一个使用 html 和 css 创建的设计，遇到了一个让我困惑的问题。

围绕我的 p 标签的 div 标签有 padding 0 20px;。 p 标签是默认的(根据 font-size)或在 css 中说明。

问题 p 标签的margin 没有显示除非有一个周围 div 中至少 1px 的填充。

HTML

<div>
    <p>Why hello there Sir!</p>
</div>

CSS

div {
    padding:0 20px;
    /* padding:1px 20px; */
    /* fixes the issue but adds an extra pixel, which I don't want */
    background:#ccc;
}
p {
    margin:20px 0;
}

这是一个工作示例(带有解决问题的按钮):http://jsfiddle.net/hrRNu/

我真的希望它能在没有任何填充的情况下工作。有什么想法吗？

Answer 1

这就是所谓的“折叠边距”，属于正常现象。在这里查看更多信息:http://www.w3.org/TR/CSS2/box.html#collapsing-margins

将 p – 一个自然的 block 级元素 – 设置为 inline-block 并不是真正适合您的问题的“修复”。

您可以改为将边距设置为 div 本身。