嵌套的垂直边距折叠如何工作？答案

【问题标题】：How do nested vertical margin collapses work?嵌套的垂直边距折叠如何工作？
【发布时间】：2017-03-25 23:18:42
【问题描述】：

我很难理解嵌套元素中垂直边距折叠的概念。我在http://www.howtocreate.co.uk/tutorials/css/margincollapsing 上发表了一篇文章，解释了它是如何工作的，但是对它的解释感到困惑。因此，在其示例中，它引用了以下两个元素

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

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

【问题讨论】：

你的意思是蓝色 div 中段落的那个位？
我不知道如何才能比那篇文章更好地解释它。也许有一些精美的图画？
@BoltClock - Nested margins 下的所有内容，除了我所说的内部块优先。

标签： css

【解决方案1】：

图表可能会有所帮助：

如果不是很明显：蓝色 = 外部 div，红色 = 内部 div；我用恒定的高度和水平定位来绘制它们。如果高度适合内容等，您可以计算出会发生什么。

“折叠前”列显示了如果边距不被认为是相邻的，例如：如果您绘制蓝色/外部 div 的边框；但如果没有边框，那么你会得到“折叠后”列。第一行从示例中切换了两个边距，因为我认为这种情况下的行为更直观；最下面是howtocreate的例子，和最上面一行是一致的。

【讨论】：

谢谢布赖恩。几个问题。当您说您以恒定的高度和水平位置绘制它们时，您的意思是什么？当您还说不相邻时，这到底是什么意思？我的理解是与文档的正常流程中发生的内容相邻，即你有一个元素在另一个元素之上，没有任何样式。
@PeanutsMonkey：他们的高度和水平位置在前后阶段没有变化；您会注意到它们的大小相同，只是在垂直轴上上下移动。不相邻/不相邻意味着它们没有相互接触。
@BoltClock - 我认为他们没有改变的原因是因为高度设置为auto。那正确吗？如果是这种情况，为什么高度属性（即height: 10px）不会以任何方式影响它？似乎影响高度的唯一属性是填充和边框属性。
@PeanutsMonkey：这是因为盒子模型声明高度只包含height，它没有考虑边距、边框或填充。
@BoltClock - It's because the box model states that height only consists of height 是什么意思？

【解决方案2】：

要记住的两条规则：

如果边距接触，它们会折叠。
嵌套项如果只有边距将它们分开，则“依偎”。
“流”之外的元素表现不同。也就是说，此行为不适用于浮动、位置：固定或位置：绝对元素。

所以对于这个 HTML（嵌套 div）：

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div>

还有这个初始的 CSS：

#outer {
    margin-top:10px;
    background:blue;
    height: 100px;
}
#inner {
    margin-top:20px;
    background:red;
    height: 33%;   
    width: 33%;
}

边距折叠到接触边距的max，嵌套的 div “依偎”到容器的开头，如下所示：(See it at jsFiddle.)

但是，当两个边距分开时（例如，通过边框或容器中的前面内容），边距不再接触，因此它们不再折叠。

EG，只是一点，不间断的空白，就像这样：

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

杀死崩溃：(See that at jsFiddle.)

使用边框代替前导文本：(Fiddle)

【讨论】：

谢谢。当您说preceding content in the container 时，您到底是什么意思？我也认为如果前面的容器例如如下例所示，嵌套 div 中的父 div 有边框或填充，它也有breaks 垂直折叠。那正确吗？ <div id="parent"><div id="child1">content</div><div id="child2">content</div>
“前面的内容”是指div#outer 和之前 div#inner 内的任何内容（除了折叠空白）。在示例中，我使用了&nbsp;，但文本或其他节点也可以。是的，如果div#outer 有边框或填充，它会分隔边距，打破折叠。查看更新的答案。
当您说collapsing whitespace 时，您是指赋予元素的高度，例如如果我将font-size 定义为 1em，那么元素之间的高度或空白是 1em？
不，元素开头或结尾的大部分空白折叠并且看不到。即：浏览器将<p> Hello </p>渲染成<p>Hello</p>。 <p> \n \r \t Hello</p> 同上。只有特殊的、非中断空格不受此折叠的影响。
对了。你有特殊的不间断空白的例子吗？

【解决方案3】：

要记住的两条规则：

如果边距接触，它们会折叠。嵌套项目“依偎”，如果只有边距将它们分开。 “流”之外的元素表现不同。也就是说，此行为不适用于浮动、位置：固定或位置：绝对元素。

Brock Adams 是正确的，但我还想补充一点，“溢出：隐藏”也可以防止嵌套边距折叠。

【讨论】：