Question

检查这个非常简单的html结构。一个div在另一个内部，内部（绿色）div有margin-top: 100px，外部（红色）div没有margin-top。外部div是内部div（100px）的两倍（200px）。

那么你期望结果如何呢？如果你像我一样，你会得到与你自然期望相反的东西。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它的正常渲染方式，称为边距折叠。您可以阅读更多内容here

Answer 2

我认为它是父/子依赖问题。两个Div的位置都是默认值：'static'。因此，红色Div落后于绿色Div，后者具有边缘顶部。