这是一个经典的问题 “垂直外边距叠加”
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
发生外边距塌陷的三种基本情况:
相邻的兄弟姐妹元素
毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：
这个段落的下外边距被合并......这个段落的上外边距被合并。
可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内补、inline content、清除浮动这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生 下外边距合并 现象。
空块元素
如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：
这个段落的和下面段落的距离将为20px这个段落的和上面段落的距离将为20px，当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。
即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。
