内部 div 不尊重相对于父 div 的 margin-top [重复]

Question

检查这个极其简单的 html 结构。一个 div 在另一个里面，内部（绿色）div 有margin-top: 100px，外部（红色）div 没有顶部边距。外部 div 是内部 div (100px) 的两倍 (200px)。

那么您希望结果是什么样的？如果你像我一样，你会得到与你自然期望得到的相反的结果。

我的问题不是如何防止这种情况。我的问题是为什么这种情况在所有浏览器中始终以这种方式发生？我的意思是，这显然必须是它的工作方式，但对我来说这非常违反直觉。

.red {
    background-color: #a00;
    height: 200px;
}

.green {
    background-color: #0a0;
    margin-top: 100px;
    height: 100px;
}

<div class="red">
    <div class="green"></div>
</div>

http://jsfiddle.net/connexo/7txnoj7m/

Answer 1

我认为这是一个父/子依赖问题。两个 Div 的位置都是默认的：'static'。因此，红色 Div 位于顶部边缘的绿色 Div 后面。

Answer 2

它的正常渲染方式称为边缘折叠。更多你可以阅读here