如何禁用保证金倒闭？

Question

有没有一种方法可以完全禁用边距收缩？我发现的唯一解决方案（名称为“
uncollapsing”）需要使用1px边框或1px填充。我发现这是不可接受的：无关紧要的像素无缘无故使计算复杂化。有没有更合理的方法来禁用此保证金倒塌？

Answer 1

保证金崩溃的主要类型有两种：

• 相邻元素之间的边距崩溃
• 父元素和子元素之间的折叠边距

仅在后一种情况下，使用填充物或边框可以防止塌陷。另外，应用于父对象的overflow与其默认值（visible）不同的任何值都可以防止崩溃。因此，两者overflow: auto和overflow: hidden将具有相同的效果。使用时唯一的区别可能hidden是如果父母的身高固定，则隐藏内容的意外结果。

一旦应用于父级，其他可以帮助解决此问题的属性是：

• float: left / right
• position: absolute
• display: inline-block / flex

我应该补充一点，像往常一样，InternetExplorer是例外。更具体地说，在IE7中，当为父元素指定某种布局时，边距不会折叠width。