当父级设置为溢出时垂直边距消失：可见答案

【问题标题】：Vertical margins disappear when parent is set to overflow:visible当父级设置为溢出时垂直边距消失：可见
【发布时间】：2012-04-02 00:39:43
【问题描述】：

为什么当父级设置为溢出时垂直边距消失：可见？如果它设置为溢出：隐藏的边距再次可见。这似乎违反直觉。

我想我理解当元素的内容无法放入其中时溢出应该如何工作，但我不明白边距发生了什么。

这是一个例子：(http://jsfiddle.net/VrVc7/)

#outer {
    background-color:#EEE;
    overflow:hidden;
}

#inner {
    margin: 30px;
    padding: 5px;
    background-color:#ABE;
}

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

【问题讨论】：

标签： css margins

【解决方案1】：

它叫做collapsing margin。根据W3c

在 CSS 中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成一个边距。边距据说以这种方式组合会崩溃，并且由此产生的组合边距称为折叠边距。

如何防止collapsing margin。

浮动框和任何其他框之间的边距不会折叠（不是甚至在浮点数与其流入的子代之间）。
建立新块格式上下文的元素的边距（例如浮动和具有“溢出”而不是“可见”的元素）不要与他们的流入孩子一起崩溃。
绝对定位框的边距不会塌陷（甚至和他们流入的孩子）。
内联块框的边距不会折叠（即使它们的流入儿童）。
流入块级元素的下边距总是折叠与其下一个流入块级兄弟的上边距，除非那个兄弟姐妹有权限。
流入块元素的上边距与其第一个元素一起折叠如果元素没有顶部，则流入块级子级的上边距边框，没有顶部填充，并且孩子没有间隙。
“高度”为“自动”的流入块框的底部边距并且“最小高度”为零会随着最后一次流入而崩溃如果盒子没有底部填充，则块级子级的底部边距并且没有底部边框并且孩子的底部边距不会折叠上边距有间隙。
如果 'min-height' 属性为零，则框自身的边距会折叠，它既没有顶部或底部边框，也没有顶部或底部填充，它的“高度”为 0 或“自动”，并且不包含一个线框，及其所有流入子级的边距（如果有）折叠。

【讨论】：

我看到此列表来自您包含的链接，但有些术语我不明白。什么是“流入”？我也对不同的块术语感到困惑。
@seron in-flow 只是意味着没有定位或浮动。他们只是彼此相邻的一些普通兄弟姐妹
感谢您解释流入。我认为我的示例是根据第 2 条规则行事。

【解决方案2】：

这是因为边距折叠：

如果您有溢出：隐藏，则内部 div 的边距保持在外部 div 内。
如果你有溢出：可见，顶部和底部边距与外部 div 的零边距折叠，因为它们相互接触。然后重新计算它与内边距相同。

因此，overflow: hidden 将破坏折叠边距与内部边距。您可以通过为外部 div 提供填充或边框来打破边距折叠。所以他们不会互相接触，所以不会崩溃

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

【讨论】：

这是溢出的副作用：隐藏吗？或者它实际上是否阻止了边缘的接触，如果是这样，如何？我不知道如何表达我想问的。我的意思是不折叠是否按照某些规则发生，也许是 Sandeep 列出的以下之一，或者实际上没有接触边距，在这种情况下是如何实现的。
顺便说一句，那个链接很有帮助。

【解决方案3】：

我知道这就是它的样子。但这里真正发生的事情称为边距崩溃。大多数情况下，如果父母有边距，或者如果两个兄弟姐妹有边距，那么就会相互重叠。想象一下，你有一个 div 和三个孩子：

|--|
|[]|
|[]|
|[]|
|--|

如果您在孩子身上设置 10 的边距。每个孩子之间总共有 10 个垂直间距，尽管您预计会有 20 个。这是因为如果边距是共享的，它们会相互折叠。

无论哪种方式谷歌它，这将比我能解释得更好。

【讨论】：