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

【问题标题】：<div> padding affecting <p> margin<div> 填充影响 <p> 边距
【发布时间】：2013-01-19 12:25:25
【问题描述】：

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

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

问题：p 标签的margin 不显示除非在@ 周围有至少1px 的padding 987654335@.

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/

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

【问题讨论】：

标签： html css margin padding

【解决方案1】：

这就是所谓的“折叠边距”，是正常行为。在此处查看更多信息：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

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

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

完美。为什么需要这样做？
@Titanium 在p 上单独使用padding:20px 0; 也可以。这是因为p 上的margin 不会增加div 的高度。它只是将其向下推。