有没有办法完全禁用边距折叠?我发现的唯一解决方案(称为“不折叠”)需要使用1px边框或1px填充。我觉得这是不可接受的:多余的像素毫无理由地使计算复杂化。是否有更合理的方法来禁用边缘折叠?


当前回答

Try

{
 display:flex;
 flex-direction:column;
}

or

{
   display:grid;
}

其他回答

溢出:隐藏可以防止边距崩溃,但它并不是没有副作用-即它…隐藏溢出。

除了这一点和你提到的,你只需要学会接受它,并为它们真正有用的那一天而学习(每3到5年一次)。

每个基于webkit的浏览器都应该支持属性-webkit-margin-collapse。还有一些子属性仅用于设置顶部或底部边距。您可以为它设置值collapse(默认值)、discard(如果有相邻的边距,则将边距设置为0)和separate(防止边距崩溃)。

我已经在2014年版本的Chrome和Safari上进行了测试。不幸的是,我不认为这将在IE支持,因为它不是基于webkit。

阅读苹果的Safari CSS参考以获得完整的解释。

如果你查看Mozilla的CSS webkit扩展页面,他们将这些属性列为私有属性,并建议不要使用它们。这是因为它们可能不会很快进入标准CSS,只有基于webkit的浏览器支持它们。

据我所知,禁用边距折叠的一个巧妙技巧是设置父边距为0.05px:

.parentClass {
    padding: 0.05px;
}

填充不再是0,所以不会再发生折叠,但同时填充足够小,从视觉上看,它会四舍五入到0。

如果需要其他填充,则只在不需要边距收缩的“方向”上应用填充,例如padding-top: 0.05px;。

工作的例子: .noCollapse { 填充:0.05 px; } .parent { 背景颜色:红色; 宽度:150 px; } 定格{ margin-top: 50 px; background - color:石灰; 宽度:100 px; 身高:100 px; } < h3 >边境崩溃< / h3 > < div class = "父" > < div class = "孩子" > < / div > < / div > <h3>无边界崩溃</h3> <div class="parent noCollapse"> < div class = "孩子" > < / div > < / div >

编辑:将数值从0.1更改为0.05。正如Chris Morgan在下面的评论中提到的,从这个小测试来看,Firefox似乎确实考虑了0.1px的填充。不过,0.05px似乎可以解决这个问题。

CSS* Fixes
display: flow-root;
✅ Parent element collapse
❌ Sibling element collapse
display: flex;
flex-direction: column;
✅ Parent element collapse
✅ Sibling element collapse

*现代浏览器(不包括IE11)支持display: flow-root和display: flex。

例子

section { background: green; outline: 2px solid purple; } p { background: yellow; margin: 1em 0; } section.flow-root { display: flow-root; } section.flex { display: flex; flex-direction: column; } <h2>Default</h2> <section> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flow-root</code> (Fixes only container)</h2> <section class="flow-root"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flex</code> (Fixes both container & siblings)</h2> <section class="flex"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section>

我知道这是一个非常老的帖子,但只是想说,在父元素上使用flexbox将禁用它的子元素的边距折叠。