如何禁用邊緣崩潰？有沒有辦法完全阻止保證金崩潰？我找到的唯一解決方案(名為“未折疊”)是使用1 px邊框或1 px填充。我認(rèn)為這是不可接受的：多余的像素沒有很好的理由使計(jì)算變得復(fù)雜。有更合理的方法來(lái)阻止這種邊緣崩潰嗎？
3 回答
Cats萌萌
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超9個(gè)贊
據(jù)我所知，禁用沒有視覺影響的邊距崩潰的一個(gè)巧妙的技巧是將父進(jìn)程的填充設(shè)置為0.05px:
.parentClass {
padding: 0.05px;
}
填充不再是0，所以不會(huì)再發(fā)生塌陷，但同時(shí)填充足夠小，在視覺上它將圓整到0。
如果需要其他填充，則僅將填充應(yīng)用于不希望出現(xiàn)邊緣塌陷的“方向”，例如padding-top: 0.05px;.
工作實(shí)例：
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>
編輯：0.10.050.1px0.05px
添加回答
舉報(bào)
0/150
提交
取消