css外边距折叠和外边距合并

【外边距折叠】两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以值相对较大的上外边距值为准。

解决办法：

1. 给父元素定义border或者padding（不推荐

2.给父元素添加overflow: hidden;（推荐

【外边距合并】这种现象发生在两个并列的元素之间。给一个元素设置下外边距（margin-bottom），并同时给一个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于其中最大的一个外边距。

解决办法：

1.只设置其中一个元素的margin值即可（推荐

2.给每一个元素添加父元素，然后触发BFC规则（不推荐

.father-box{
                        /*解决外边距合并 */
				overflow: hidden;
			}

参考：https://zhuanlan.zhihu.com/p/337857229