当相邻的内部和外部元素的边距塌陷

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）我不知道为什么边距在填充时也没有崩溃的确切原因。我打算假设它与盒子型号规格有关...