當相鄰的內部和外部元素的邊距塌陷

Question

我讀過如果一個元素嵌套在另一個元素中，並且它們都有邊距，那麼它們可能會崩潰（假設它們的垂直邊距正在觸摸）。

一）在什麼條件下它們的垂直邊距中感人？ 也許只有當父元素有一個固定的高度，而內部元素需要更多的垂直空間比父元素可以支配（我做了一點實驗，但我不認爲我已經設法造成相鄰內部的垂直邊緣和外部元素崩潰）？

B）不管怎麼說，我不明白爲什麼這是一個好主意（從視圖設計的角度），使內部和外部因素崩潰的邊緣？

c）假設的內元件具有100像素的餘量和外部元件的20像素的餘量，當兩個邊緣崩潰則兩個元件將具有100像素的餘量？

在任何情況下，我仍然有一個很難可視化這一點。即，通常的邊緣接觸是底部邊緣和頂部餘量，但在這裏兩個倍數或者是底部邊緣或上邊緣

感謝名單

編輯：

1）由於在以下示例中（從您提供的鏈接）DIV和H1崩潰的邊緣拍攝，我會期望的字母H1最高的部分元素會觸及的div元素的頂部邊緣（即頂橙色矩形的一邊），但是在字母和矩形的頂邊之間有一些空間（幾毫米）。這是爲什麼？

#masthead {background: #F80; margin: 10px;} 
#masthead h1 {margin: 20px 10px;} 
#masthead p {margin: 5px 10px; font-style: italic;} 


<div id="masthead"> 
<h1>ConHugeCo</h1> 
<p>Making the world safe for super sizes</p> 
</div> 

2）爲什麼將填充引起家長DIV和兒童H1）不崩潰的邊緣（？因爲現在h1的邊距不在起始位置（該位置是橙色長方形的頂端）作爲父級的邊距div？！

感謝名單

Answer 1

埃裏克邁耶知道CSS廢話負荷。

退房this article他寫了關於摺疊邊距，它們爲什麼會發生，以及如何在需要時阻止它們。

編輯：更新後更新。

1）我猜來自h1的信件由於行高而不要碰div。一行文字在其上面有一些空格，基於行高，這與margin或padding無關。嘗試調整，如果你想他們完全沖洗。

2）我不知道爲什麼邊距在填充時也沒有崩潰的確切原因。我打算假設它與盒子型號規格有關...