另外，当一个元素包含在另一个元素中时，它们的顶或底边界也发生叠加。比如：我们把层b放在a层内。
即<div id="a"><div id="b"></div></div>。然后为他们添加样式。

我们把a层设置为200*200大小，并为他添加上边界（margin-top:20px）为20px。B层样式不改变，上边界为30px。那么，这里b层距离浏览器是不是20+30=50px呢？答案肯定不是。因为发生了边界叠加，因此b层距离浏览器的距离仍然30px即（20px  30px 中最大的）。那么，a层距离浏览器的距离是20px吗？不是，而是30px.(也是边界中最大的一个)。所以，此时a b层距离浏览器的距离都是30px。 效果如图（火狐）

这就是所谓的边界叠加。但在IE里面支持的不够好，大家可以比较火狐和IE的效果差异。

注意：
1、只有普通文档流中的垂直边界才会叠加。浮动、绝对定位不会叠加
2、只有元素没有设置的padding border时，才发生边界叠加。
3、只有垂直边界才会发生叠加，水平边界不叠加。