禁用邊距折疊的方法分享

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的文章折疊外邊距