Question

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

我的div标记周围的p标记的padding为0 20px;。 p代码是默认代码（根据font-size）或在css中说明。

问题： margin标记的p未显示，除非至少padding 1px {1}}周围的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本身。

Answer 2

试试这个

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

<div>填充<p> margin </p> </div>

2 个答案: