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


当前回答

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

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

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

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

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

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

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

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

其他回答

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.parent {
  display: grid
}