垂直相邻margin合并解决方法

Posted 2020-10-28 前端之路

块级元素的垂直相邻外边距会合并，水平边距永远不会重合。

行内元素实际上不占上下外边距，左右外边距也不会合并。浮动元素的外边距也不会合并。

外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

外边距(margin)重叠示例

外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。
图示：

另一个重叠现象是当一个元素包含在另一个元素之中时，子元素与父元素之间也会产生重叠现象，重叠后的外边距，等于其中最大者：

同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。

 

垂直相邻margin值计算方法如下：

a、全部都为正值，取最大者；

b、不全是正值，则都取绝对值，然后用正值减去最大值；

c、没有正值，则都取绝对值，然后用0减去最大值。

解决方案：

1. 外层元素 overflow:hidden;

2. 外层元素加【padding】 代替。宽度等于外边距值padding-bottom:50px;（有时候不合适）

3. 内层元素加【绝对定位】 postion:absolute;（缺点：改变了位置）

4. 内层元素加【float:left;】或【display:inline-block;】（缺点：改变了位置）

5. 内层元素加【padding】。宽度等于外边距值padding-top:50px;（有时候不合适）

6. 内层元素加【透明边框】 代替。边框宽度等于外边距值 border-top:50px solid transparent;（缺点：如果有背景颜色，看起来就像改变了大小）