<div>填充影响<p>边距

Question

我有一个使用的设计html,css并且遇到了一个令我困惑的问题.

在div围绕我的标签p标签具有padding的0 20px;.该p标签是无论是作为缺省(根据font-size)或陈述css.

问题:在margin对的p标记没有显示,除非有一个padding至少1px在周围div.

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 - 一个自然的块级元素 - inline-block对你的问题来说不是一个真正合适的"修复".

您可以改为将余量设置为div本身.