为什么我的子html元素的边距在父元素之外

提问者：小点点

在父div中有一个子元素（在我的示例中为h1)。

为什么子页边距似乎在父页边距之外。

下面的例子:

孩子有一个30像素的填充和一个红色的边框围绕它的预期。div有一个黄色背景，但我希望它的高度是100+30+h1+30+100。

null

div {
    background-color: yellow;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

null

有趣的是，如果我在div周围放一个边框，就像下面的例子那样--它的行为就像我预期的那样。我知道我可以解决这个问题，但我想知道是怎么回事？

null

div {
    background-color: yellow;
    border: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

null

匿名用户

这是“边际崩溃”，一开始看起来会让人困惑。

我建议您阅读https://developer.mozilla.org/en-us/docs/web/css/css_box_model/mastering_margin_collapsing

匿名用户

空块:如果没有边框，填充，内联内容，高度或最小高度来分隔块的边距-顶部和边距-底部，则其上，下边距折叠。参考

您可以使用outlinecss属性来实现一致的行为。

div {
    background-color: yellow;
    outline: 5px solid green;
}

h1 {
    margin: 100px;
    padding: 30px;
    border: 5px solid red;
}

<div>
    <h1>Child</h1>
</div>

匿名用户

这可以通过在div或h1上应用display:inline-block来解决。但是，在这种情况下，我强烈建议在div上使用padding，这样可以永久解决这个问题。

共3个答案