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

Question

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

为什么 child 的边缘看起来在 parent 之外。

下面的例子:

child 有一个 30px 的填充和一个红色的边框，如预期的那样。div 的背景为黄色，但我预计它的高度为 100 + 30 + h1 + 30 + 100。

div {
    background-color: yellow;
}

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

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

有趣的是，如果我像下面的示例那样在 div 周围放置一个边框 - 它的行为符合我的预期。我知道我可以解决这个问题，但我想知道发生了什么？

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

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

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

Answer 1

这是“利润率崩溃”，乍一看可能令人困惑。

我建议您阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing