css外边距(margin)重叠问题
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠;
外边距重叠是指两个垂直相邻的块级元素,当上下两个边距相遇时,其外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。
同理,如果一个无内容的空元素,其自身上下边距也会产生重叠。
防止外边距重叠解决方案
- 外层元素padding代替
- 内层元素透明边框 border:1px solid transparent;
- 内层元素绝对定位 postion:absolute:
- 外层元素 overflow:hidden;
- 内层元素 加float:left;或display:inline-block;