Question

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

我想我理解当元素的内容不适合溢出时溢出应该如何工作，但是我不明白边缘发生了什么。

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

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

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

Answer 1

它被称为collapsing margin。根据{{3}}

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

如何阻止collapsing margin。

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

Answer 2

这是因为利润率下降：

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

因此，溢出：隐藏将打破内部崩溃的边缘。您可以通过为外部div添加填充或边框来打破边距折叠。所以他们不会互相接触，所以不会崩溃

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

Answer 3

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

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

如果你给孩子留了10分。每个孩子之间总共会有10个垂直间距，即使你预计会有20个。这是因为如果边缘是共享的，它们会相互坍塌。

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

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

3 个答案: