简单理解css中的盒子外边距垂直方向上的合并问题

简单地说，外边距合并指的是，当两个垂直方向上的外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
个人理解：不是相遇而是相连。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如下：

1.gif

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。如下：

2.gif
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
3.gif
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
4.gif

总的来说就是：一个外边距与另一个外边距相连时(只要有部分挨在一起)，然后在垂直方向上有外边距合并；