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
似乎是有效的。
P粉5886603992023-08-22 16:36:44
有兩種主要的外邊距摺疊:
只有在後一種情況下,使用填充或邊框才能防止折疊。此外,任何不同於其預設值(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的文章折疊外邊距