css上下margin合并问题

margin合并有三个场景。
1、兄弟元素之间，上面元素的margin-bottom和下面元素的margin-top之间的合并。合并后的距离取两者之间最大值。

解决方案：只设置一个元素的外边距即可。
2、父子元素之间，父元素和第一个或最后一个子元素发生合并。
代码如下图：

现象：子元素和父元素的margin-top合并。同理父元素和子元素的margin-bottom也会产生合并。
解决方案：
①父元素设置overflow不为visible②父元素设置padding-top③父元素设置border-top
3、空块级元素合并
代码：
现象：父div元素高度为50px,子元素的上下外边距合并。
解决方案：子元素设置border-top、子元素设置padding-top 、子元素设置overflow不为visible