为什么当父级设置为溢出时垂直边距会消失：可见？如果设置为溢出：隐藏的页边距将再次可见。这似乎违反直觉。
我想我理解当一个元素的内容无法容纳时溢出应该是如何工作的，但我不明白边距会发生什么。
下面是一个例子：（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>
它被称为collapsing margin。根据W3c
在CSS中，两个或多个框（可能或可能不是兄弟姐妹）可以组合形成单个边距。保证金以这种方式结合在一起的被称为崩溃保证金称为崩溃保证金。
如何预防collapsing margin。
- 浮动框和任何其他框之间的边距不会折叠（不是甚至在浮子及其流入的子对象之间）
- 建立新块格式上下文的元素的边距（例如浮动和具有"overflow"而非"visible"的元素）不要和他们的孩子们一起崩溃
- 绝对定位框的边距不会塌陷（甚至不会带着他们的孩子）
- 内联块框的边距不会折叠（即使使用它们流入子代）
- 流入块级别元素的底边总是塌陷具有其下一个流块级别同级的上边距，除非那个兄弟姐妹有许可证
- 流入块元素的上边缘随着其第一个而塌陷在流块级别中，如果元素没有顶部，则子元素的上边距边界，没有顶部填充物，孩子没有间隙
- "高度"为"auto"的流中阻止框的底部边距零的"最小高度"随着其最后流入而塌陷块级子级的下边距（如果框没有底部填充）没有底部边界，孩子的底部边缘不会塌陷顶部边缘有间隙
- 如果"最小高度"属性为零，则框自身的边距会塌陷，并且它既没有顶部边界也没有底部边界也没有顶部填充，并且它的"高度"为0或"auto"，并且它不包含一个行框及其所有流入子页边距（如果有的话）坍塌
这是因为利润率下降：
如果您有overflow：hidden，内部div的边距将保留在外部div内部。
如果您有overflow：visible，则上下边距与外部div的零边距重合，因为它们相互接触。然后重新计算，使其与内边距相同。
所以，溢出：隐藏将打破崩溃的边缘与里面的。您可以通过给外部div一个填充或边界来打破边距折叠。这样它们就不会相互接触，也就不会崩溃
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
我知道这就是它的样子。但这里真正发生的是所谓的边际崩溃。大多数情况下，如果父母有一个差额，或者如果两个兄弟姐妹有差额，那么他们就会超过对方。假设你有一个有三个孩子的div：
|--|
|[]|
|[]|
|[]|
|--|
如果你给孩子们留出10分的差距。每个孩子之间总共有10个垂直间距，尽管你预计会有20个。这是因为如果利润被分享，它们就会相互崩溃。
不管怎样，用谷歌搜索一下，这将比我所能做的更好地解释它。