当父元素设置为overflow:visible时，垂直边距会消失。

Question

当父元素设置为overflow:visible时，垂直边距会消失。

6

为什么父元素设置为overflow:visible时，垂直边距会消失？当它设置为overflow:hidden时，边距又会重新出现。这似乎是违反直觉的。我想我理解了当元素的内容不能适应时overflow该如何工作，但我不明白边距发生了什么。以下是一个示例：(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>

- ivvi

3个回答

4

这是由于边距折叠引起的：

如果您使用了overflow: hidden，内部div的边距将保留在外部div内。
如果您使用了overflow: visible，上下边距会与外部div的零边距发生折叠，因为它们彼此接触。然后重新计算为与内部边距相同。

因此，overflow: hidden将打破内部和外部的边距折叠。您可以通过给外部div添加填充或边框来打破边距折叠。这样它们就不会相互接触，也就不会发生折叠了。

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

- yunzen

这是overflow:hidden的副作用吗？还是它确实可以防止边距相接触，如果是这样，那么是如何实现的？我不确定如何表达我的问题。我的意思是，非折叠是否按照某些规则发生，也许是由Sandeep列出的以下规则之一，或者边距实际上没有接触，那么在这种情况下如何实现。 - ivvi

顺便说一句，那个链接非常有帮助。 - ivvi

1

我知道这看起来是什么样子。但实际上这里发生的是边距折叠。大多数情况下，如果父元素有一个边距，或者如果两个兄弟元素有一个边距，那么它们会重叠在一起。想象一下你有一个带有三个子元素的 div：

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

如果你在子元素上设置了10的边距，那么每个子元素之间会有10的垂直间隔，即使你期望是20。这是因为如果margin被共享，它们会合并在一起。

无论如何，最好还是谷歌一下，这样会比我解释得更好。

- Roderick Obrist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sandeep · Accepted Answer

这被称为“折叠边距”。根据W3c的规定，在CSS中，两个或多个框的相邻边距（可能是兄弟姐妹，也可能不是）可以合并成一个单一的边距。以这种方式合并的边距称为折叠边距，并且所得到的组合边距称为折叠边距。如何防止“折叠边距”。

浮动框与其他框之间的边距不会折叠（即使是浮动框与其流动子元素之间也不会折叠）。
建立新块级格式化上下文的元素的外边距（例如浮动元素和具有“overflow”属性但不是“visible”的元素）与其流动子元素不会折叠。
绝对定位框的外边距不会折叠（即使与其流动子元素也不会折叠）。
内联块框的外边距不会折叠（即使与其流动子元素也不会折叠）。
流动块级元素的底部外边距总是与其下一个流动块级兄弟元素的顶部外边距折叠，除非该兄弟元素具有清除效果。
如果元素没有顶部边框、顶部填充和子元素没有清除效果，则流动块元素的顶部外边距将与其第一个流动块级子元素的顶部外边距折叠。
高度为“auto”且最小高度为零的流动块框的底部外边距将与其最后一个流动块级子元素的底部外边距折叠，如果框没有底部填充和底部边框，并且子元素的底部外边距不会与具有清除效果的顶部外边距折叠。
如果“min-height”属性为零，既没有顶部边框、顶部填充，也没有底部边框、底部填充，高度为0或“auto”，并且不包含行框，则元素自身的外边距将折叠，以及其所有流动子元素（如果有）的外边距也折叠。