当相邻内部和外部元素的边距折叠时

Question

我读过如果一个元素嵌套在另一个元素中并且它们都有边距，那么它们可能会折叠（假设它们的垂直边距是接触的）。

a) 在什么情况下它们的垂直边距会接触？ 也许只有当父元素具有固定高度时，而内部元素占用的垂直空间比父元素可支配的更多（我做了一些实验，但我认为我没有设法导致相邻内部和要折叠的外部元素）？

b) 无论如何，我不太明白为什么（从设计师的角度来看）让内部和外部元素的边距折叠是个好主意？

c) 假设内部元素的边距为 100px，外部元素的边距为 20px，当两个边距折叠时，两个元素的边距都为 100px？

无论如何，我仍然很难想象这一点。即，通常接触的边距是下边距和上边距，但这里两个边距都是下边距或上边距

感谢

编辑：

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

Eric Meyer 对 CSS 很了解。

查看 this article 他写的关于边距折叠、为什么会发生以及在需要时如何阻止它们的文章。

编辑：更新后更新。

1) 我猜来自h1 的字母不要碰div，因为行高。基于与边距或填充无关的行高，一行文本在其上方有一些空间。如果您希望它们完全齐平，请尝试调整它。

2）我不知道为什么当涉及到填充时边距不会塌陷的确切原因。我会假设它与盒子模型规格有关......