两层margin叠加问题

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠； 
外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。 
同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。

防止外边距重叠解决方案：

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
---------------------  
原文：https://blog.youkuaiyun.com/misttt/article/details/77778530