禁用边距折叠的方法分享

Question

有没有一种方法可以完全禁用边距折叠？我找到的唯一解决方案（名为“uncollapsing”）是使用1像素的边框或1像素的填充。我觉得这是不可接受的：多余的像素会无端复杂化计算。有没有更合理的方法来禁用这种边距折叠？

Answer 1

一个不会对视觉产生影响的禁用外边距折叠的巧妙技巧，据我所知，是将父元素的内边距设置为0.05px：

.parentClass {
    padding: 0.05px;
}

内边距不再为0，因此不会发生折叠，但同时内边距足够小，视觉上会被四舍五入为0。

如果需要其他内边距，则只在不希望发生外边距折叠的“方向”上应用内边距，例如padding-top: 0.05px;。

工作示例：

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>边框折叠</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>无边框折叠</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

编辑：将值从0.1更改为0.05。正如克里斯·摩根在下面的评论中提到的，并且从这个小测试中可以看出，似乎Firefox确实考虑了0.1px的内边距。不过，0.05px似乎是有效的。

Answer 2

有两种主要的外边距折叠：

• 相邻元素之间的外边距折叠
• 父元素和子元素之间的外边距折叠

只有在后一种情况下，使用填充或边框才能防止折叠。此外，任何不同于其默认值（visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden时唯一的区别是如果父元素具有固定高度，则会意外隐藏内容。

其他一些应用于父元素后可以帮助修复此行为的属性有：

• float: left / right
• position: absolute
• display: flex / grid

您可以在此处测试它们：http://jsfiddle.net/XB9wX/1/。

我应该补充说，像往常一样，Internet Explorer是个例外。具体来说，在IE 7中，当为父元素指定某种布局（例如width）时，外边距不会折叠。

来源：Sitepoint的文章折叠外边距