在CSS中，两个相邻的盒子会存在“外边距margin合并”的现象：
1.margin合并的前提：
① 外边距合并只出现在两个紧紧相邻的盒子(父子关系或兄弟关系)，如果两个盒子间存在border或padding则无法合并；
② 外边距合并只发生在普通文档流中垂直方向上相邻的块级元素，而水平方向上的两个相邻的盒子则不会发生外边距合并。
2.两个盒子外边距合并后的实际边距：
① 两个盒子的margin均为正值，外边距合并后的实际边距为二者中较大的值；
② 两个盒子的margin均为负值，外边距合并后实际边距为二者中较小的值；
③ 两个盒子的margin一个为正值、一个为负值，外边距合并后实际边距为二者之和。
为了避免在使用盒子的外边距margin时出现合并现象，可以使用内边距padding代替(padding不存在合并现象)。
原文：https://www.cnblogs.com/xuwennn/p/margin.html