html - 填充影响利润

Question

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

我的div标签周围的标签p有一个padding. 0 20px;该p标签是默认的（根据font-size）或在css.

问题：除非周围至少有一个marginof ，否则p不会显示标签的。padding1pxdiv

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 本身。

Answer 2

试试这个

div {
    background:#ccc;
    padding:0 20px;
}
p {
    display: inline-block;
    margin:20px 0;
}