禁用邊距折疊的方法分享
P粉530519234
P粉530519234 2023-08-21 23:21:12
0
2
471
<p>有沒有一種方法可以完全停用邊距折疊?我找到的唯一解決方案(名為“uncollapsing”)是使用1像素的邊框或1像素的填充。我覺得這是不可接受的:多餘的像素會無端複雜化計算。有沒有更合理的方法來停用這種邊距折疊? </p>
P粉530519234
P粉530519234

全部回覆(2)
P粉521013123

一個不會對視覺產生影響的禁用外邊距折疊的巧妙技巧,據我所知,是將父元素的內邊距設定為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似乎是有效的。

P粉588660399

有兩種主要的外邊距摺疊:

  • 相鄰元素之間的外邊距折疊
  • 父元素與子元素之間的外邊距折疊

只有在後一種情況下,使用填充或邊框才能防止折疊。此外,任何不同於其預設值(visible)的overflow屬性套用於父元素都會防止折疊。因此,overflow: autooverflow: hidden將產生相同的效果。也許使用hidden時唯一的區別是如果父元素具有固定高度,則會意外隱藏內容。

其他一些應用於父元素後可以幫助修復此行為的屬性有:

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

您可以在此處測試它們:http://jsfiddle.net/XB9wX/1/

我應該補充說,像往常一樣,Internet Explorer是個例外。具體來說,在IE 7中,當為父元素指定某種佈局(例如width)時,外邊距不會折疊。

來源:Sitepoint的文章折疊外邊距

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板