垂直外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注意：只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

当一个元素出现在另一个元素上面时（兄弟元素之间）

它们的上元素的下外边距和下元素的上外边距也会发生合并，取两者之间的较大值

解决方案：给其中一个div套一个div，并给这个外层div开启BFC（设置overflow：hidden）

当一个元素包含在另一个元素中时（父子元素）

它们的上外边距/或者下外边距会发生合并，取两者之间的较大值

解决方案：
1、给父元素开启BFC（设置overflow：hidden）。
此时父子元素属于不同的BFC管理。父元素属于根标签的BFC，子元素属于父元素的BFC管理。
2、给父元素添加border，此时父子元素的margin就不相邻了。

外边距甚至可以与自身发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并：