margin-top 折叠

假设 b 是 a 的子节点，如果这时候对 b 设置 margin-top: 10px, 那么 a、b 的 margin-top 将会折叠在一起，产生的效果是 a 会 margin-top: 10px, b 没有效果:

<style>
    .b{
        margin-top: 10px;
    }
</style>

<div class="a">
    <div class="b">
</div>

为什么叫做「折叠」呢？因为如果你将 b 设置 margin-top: 10px 的同时，将 a 设置 margin-top: 5px, 那么效果跟上面只将 b 设置 margin-top: 10px 是同一个效果。也就是说，将 a、b 的 margin-top 折叠在了一起。

那么折叠规则是什么呢？会取其大者。如果 a、b 都设置 margin-top, 会取其大者，将其应用于 a. 详细规则见 Box model

显然我们是想让 b 元素 margin-top a 元素，而不是让他们俩一起 margin-top. 看了上面的详细规则后，我们得出以下解决方案：