为什么我的孩子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

这是“边缘崩溃”，一开始看起来很混乱。

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

Answer 2

  

空块：如果没有边框，填充，内联内容，高度，   或最小高度将块的边缘顶部与其边缘底部分开，   然后它的顶部和底部边缘崩溃。 Ref

您可以使用outline css属性来保持一致的行为。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

当您设置边框时，表示您正在告诉DIV容器它的边界。

你必须指定宽度和浮点数。

float: left;
width: 100%; 

现在DIV从顶部开始。但从中间显示背景。

Answer 5

div {
    background-color: yellow;
    padding:100px;
}

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

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

或者这个

div {
    background-color: yellow;
    padding:1px;
}

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

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