爲什麼我的孩子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從頂部開始。但從中期展示背景。