搜尋

首頁  >  問答  >  主體

禁用邊距折疊的方法分享

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

全部回覆(2)我來回復

  • P粉521013123

    P粉5210131232023-08-22 17:46:33

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

    回覆
    0
  • P粉588660399

    P粉5886603992023-08-22 16:36:44

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

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

    只有在後一種情況下,使用填充或邊框才能防止折疊。此外,任何不同於其預設值(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的文章折疊外邊距

    回覆
    0
  • 取消回覆