如何禁用边距折叠?

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

当前回答

供你参考网格，但有副作用:)

.parent {
  display: grid
}

2017-08-16 07:30:31

其他回答

Try

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

{
   display:grid;
}

2021-12-26 05:08:16

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

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

2013-11-01 00:20:40

据我所知，禁用边距折叠的一个巧妙技巧是设置父边距为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似乎可以解决这个问题。

2015-10-14 18:11:58

保证金暴跌主要有两种类型:

相邻元素之间的折叠边距缩小父元素和子元素之间的边距

只有在后一种情况下，使用填充或边框才能防止崩溃。此外，任何溢出值与父对象的默认值(可见)不同，都将防止崩溃。因此，overflow: auto和overflow: hidden具有相同的效果。也许使用hidden的唯一不同之处在于，如果父对象具有固定的高度，则隐藏内容会导致意想不到的后果。

其他属性，一旦应用到父，可以帮助修复这种行为:

浮动:左/右位置:绝对的显示方式:inline-block / flex / grid

您可以在这里测试所有这些:http://jsfiddle.net/XB9wX/1/。

我应该补充一点，像往常一样，Internet Explorer是个例外。更具体地说，在IE 7中，当为父元素指定某种布局(比如宽度)时，边距不会折叠。

来源:Sitepoint的文章“崩溃边缘”

2013-11-01 01:25:42

为了防止姐妹页边距崩溃，添加display: inline-block;给兄弟姐妹中的一个(一个就足够了，但你可以给两个都加)。