css - parent设置溢出时垂直边距消失:visible

Question

为什么当父级设置为 overflow:visible 时垂直边距消失了？如果设置为 overflow:hidden margins 再次可见。这似乎违反直觉。

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

这是一个例子:( 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>

Answer 1

这叫做collapsing margin。根据 W3c

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

如何防止 collapsing margin。

1. float 框和任何其他框之间的边距不会折叠(不是甚至在 float 和它的流入 child 之间)。
2. 建立新 block 格式化上下文的元素边距(例如 float 和带有“溢出”而不是“可见”的元素)不要和他们流入的 child 一起崩溃。
3. 绝对定位框的边距不会塌陷(甚至和他们流入的 child )。
4. 行内 block 框的边距不会塌陷(甚至连它们的流入 child )。
5. 流入 block 级元素的底部边距总是折叠与其下一个流入 block 级兄弟的顶部边距，除非那个 sibling 有许可。
6. 流入 block 元素的上边距与其第一个一起折叠如果元素没有顶部，则流入 block 级子元素的上边距边框，没有顶部填充， child 没有间隙。
7. “高度”为“自动”的流入 block 框的底部边距并且“最小高度”为零会随着最后一次流入而坍塌如果框没有底部填充，则为 block 级子项的底部边距并且没有底部边框并且 child 的底部边距不会折叠顶部边缘有间隙。
8. 如果 'min-height' 属性为零，则框自身的边距会折叠，它既没有顶部或底部边框，也没有顶部或底部填充，它的“高度”为 0 或“自动”，并且不包含一个线框，以及它所有的流入子元素的边距(如果有的话)崩溃。