为什么我的孩子HTML元素的父母外边距

Question

我有一个父元素内的子元素（我的例子中的h1）。

为什么孩子的边缘看起来不在家长的范围之内。

下面的例子：

的孩子有30像素的填充，并且如预期红色边框圆它。 的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 { 
 
    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

这可以是通过在DIV或H1施加display: inline-block固定。不过，我强烈建议在这种情况下在div上使用padding，这应该永久解决问题。

Answer 3

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>

Answer 4

空块：如果没有边框，填充，内联内容，高度， 或最小高度以将块的边缘顶部与边缘底部分开，则其顶部和底部边距将折叠。 Ref

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

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

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

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

Answer 5

当你设置这意味着你说的是DIV容器它的边界的边界。

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

float: left; 
width: 100%; 

现在DIV从顶部开始。但从中期展示背景。