margin叠加问题及解决办法

版权声明： https://blog.csdn.net/MisTTT/article/details/77778530

css外边距（margin）重叠问题

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

防止外边距重叠解决方案

1. 外层元素padding代替
2. 内层元素透明边框 border:1px solid transparent;
3. 内层元素绝对定位 postion:absolute:
4. 外层元素 overflow:hidden;
5. 内层元素 加float:left;或display:inline-block;