关于外边距合并问题

Posted 2020-09-21 情绪控攻城狮

2、margin相邻折叠问题

在开发中，我们偶尔会遇到明明两个div都设置了margin，可是它们之间的距离就是不等于两个div的margin之间的和，这是为什么呢？其实是因为在某些情况下，两个或多个块元素的相邻边界（其间没有任何非空内容、padding、边框）会发生合并成单一边界，也就是标题说的折叠。

先来看看兄弟块级元素的折叠，如下图所示：

 

 

还要注意的是，父元素与其子元素之间也会发生折叠：

 

 

2个或多个块级相邻元素的外边距（margin）的折叠规则：

• 外边距都为正值时，取最大值
• 不全是正值时，则用正值减去（所有值的绝对值中）最大值
• 全为负值时，则取最小值

不发生折叠情况：

• 水平（左右）外边距不会折叠
• 浮动元素的外边距不会折叠，并且浮动元素与它的子元素之间也不会发生折叠
• 设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠
• 绝对定位（position:absolute;）元素的margin不与任何margin发生折叠，并且与它的子元素之间的margin也不会发生折叠

解决折叠的方法：

• 外层元素用padding替代margin
• 外层元素设置overflow:hidden
• 内层元素加padding:1或者border
• 内层元素加浮动（float）或设为（display:inline-block）
• 内层元素使用绝对定位（position:absolute;）