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

Question

我在父div中有一个子元素(在我的例子中是h1).

为什么孩子的边缘似乎在父母之外.

以下示例:

这个孩子有一个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

这是"边缘崩溃",一开始看起来令人困惑.