html - 泄漏 margin : unexpected offset due to nested DIVs

Question

我有一些无法解释的奇怪现象，嵌套 DIV 的边距从父容器中“泄漏”了出来。

以下测试用例*可能是最好的解释:

http://jsbin.com/ibaze

外部包装(红色)不会从最顶部开始 - 除非该元素上有文本节点或 overflow: auto;。 (在 Firefox 和 Safari 上测试。)

虽然溢出可以让我解决这个问题，但我很想知道它首先发生的原因。 任何见解将不胜感激!

* 这是一个最小的测试用例，除了底部的脚本，它仅说明了解决方法

Answer 1

它不起作用的原因是您在 CSS 中的垂直边距正在折叠，这是预期的行为。

从 #inner 中移除边距，并为您的 #outer 指定一个 padding: 50px; 以获得所需的结果:

* {
    margin: 0;
    padding: 0;
}

body {
    color: white;
    background-color: blue;
}

#outer {
    padding: 50px;
    background-color: red;
}

#inner {
    background-color: green;
}

有关垂直边距折叠的更多信息，我建议您阅读以下文章:

CSS - Auto-height and margin-collapsing