Question

我有一些无法解释的怪异，嵌套DIV的边距“泄漏”出父容器。

以下测试用例*最好解释一下：

http://jsbin.com/ibaze

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

虽然溢出让我可以解决这个问题，但我很想知道它为什么会发生这种情况。任何见解都将不胜感激！

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

Answer 1

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

从#inner移除保证金，然后为padding: 50px;指定#outer以获得所需结果：

* {
    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

泄漏边距：由嵌套DIV引起的意外偏移

1 个答案: