Css 嵌套的垂直边距折叠是如何工作的？

我很难理解嵌套元素中垂直边距崩溃的概念。我写了一篇文章来解释它是如何工作的，但是我被它的解释弄糊涂了。因此，在其示例中，它引用了以下两个元素

<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>  

A.

看到内部div有20px的边距，这就是将应用于整个代码块的边距。让我困惑的是，在那之后的一切，以及还没有考虑Internet Explorer 7的问题。有人能以一种简单的方式为CSS的新手解释一下吗？

图表可能会有帮助：

如果不明显：蓝色=外部div，红色=内部div；我用恒定的高度和水平位置绘制了它们。您可以计算出如果高度与内容物等相匹配会发生什么情况

---

“折叠前”列显示边距不相邻时得到的结果，例如，如果绘制蓝色/外部div的边框；但如果没有边框，则会出现“折叠后”列。最上面一行切换示例中的两个边距，因为我认为这种情况下的行为更直观；下一行显示了如何创建的示例，与上一行一致。

要记住两条ish规则：

如果利润相抵，它们就会崩溃

如果只有边距将嵌套项分隔开，则它们会“依偎在一起”

“流”之外的元素表现不同。也就是说，此行为不适用于浮动元素、位置：固定元素或位置：绝对元素

因此，对于此HTML（嵌套div）：

边距折叠到接触边距的最大值，嵌套的div“依偎”到容器的开头，如下所示：（）

但是，当两个页边距被分隔的那一刻——例如，被一个边框或容器中的前一个内容分隔的那一刻——页边距不再接触，因此它们不再塌陷

例如，只有一点不间断的空白，就像这样：

<div id="outer">&nbsp;
    <div id="inner">
        A
    </div>
</div>

A.

杀死塌陷：（）

使用边框而不是前导文本：（）

---

要记住两条规则：

如果利润相抵，它们就会崩溃。如果只有边距将嵌套项分隔开，则它们会“依偎在一起”。“流”之外的元素表现不同。也就是说，此行为不适用于浮动元素、位置：固定元素或位置：绝对元素

---

布罗克·亚当斯是正确的，但我还想补充一点，“溢出：隐藏”也可以防止嵌套页边距崩溃。

你是指蓝色分区中的段落位吗？我不知道如何才能比那篇文章更好地解释它。也许有一些画得很漂亮的图片？@BoltClock-除了我说的内部块优先外，

嵌套页边距下的所有内容。谢谢Brian。有几个问题。当你说你用一个恒定的高度和水平的位置画它们时，你的确切意思是什么？当你也说不相邻时，那到底是什么意思？我的理解与文档正常流程中发生的情况类似，即一个元素位于另一个元素之上，没有样式设置。@PeanutsMonkey:它们的高度和水平位置在前后阶段都没有改变；你会注意到它们大小相同，只是沿垂直轴上下移动。不相邻/相邻表示它们没有相互接触。@BoltClock-我认为它们没有改变的原因是因为高度设置为
auto
。是这样吗？如果是这种情况，为什么高度属性，即
height:10px
对其没有任何影响？似乎影响高度的唯一属性是padding和border属性。@PeanutsMonkey：这是因为长方体模型声明高度只包含
高度
，不包含边距，考虑到边框或填充。@BoltClock-你所说的
是什么意思？这是因为长方体模型说明高度只由高度组成
？谢谢。当你说容器中前面的内容时，你的确切意思是什么？我还认为，如果前面的容器（如下面的示例中嵌套div中的父div）有边框或填充，它也会打破垂直折叠。是这样吗
contentcontent
我所说的“前面的内容”是指
div#outer
内部和
div#inner
之前的任何内容（除了折叠空白）。在本例中，我使用了
，但文本或其他节点也可以。是的，如果
div#outer
有边框或填充，它会分隔边距，打破折叠。查看更新后的答案。当您说
折叠空格
时，您是指给定给元素的高度吗？例如，如果我将
字体大小
定义为1em，则元素之间的高度或空格为1em？不，元素开头或结尾的大多数空格折叠，并且看不到。也就是说：浏览器将呈现与
Hello
相同的
Hello
。
\n\r\t Hello
也一样。只有特殊的，非破坏性的空格可以免于崩溃。啊，对了。你们有特殊的不间断空格的例子吗？
#outer {
    margin-top:10px;
    background:blue;
    height: 100px;
}
#inner {
    margin-top:20px;
    background:red;
    height: 33%;   
    width: 33%;
}

<div id="outer">&nbsp;
    <div id="inner">
        A
    </div>
</div>