有没有办法完全禁用边距折叠?我发现的唯一解决方案(称为“不折叠”)需要使用1px边框或1px填充。我觉得这是不可接受的:多余的像素毫无理由地使计算复杂化。是否有更合理的方法来禁用边缘折叠?
当前回答
供你参考 网格，但有副作用:)
.parent {
display: grid
}
其他回答
供你参考 网格，但有副作用:)
.parent {
display: grid
}
Try
{
display:flex;
flex-direction:column;
}
or
{
display:grid;
}
溢出:隐藏可以防止边距崩溃，但它并不是没有副作用-即它…隐藏溢出。
除了这一点和你提到的，你只需要学会接受它，并为它们真正有用的那一天而学习(每3到5年一次)。
您还可以使用老式的micro clearfix。
#container::before, #container::after{
content: ' ';
display: table;
}
查看更新后的小提琴:http://jsfiddle.net/XB9wX/97/
我有类似的问题，边际崩溃，因为父母有位置设置为相对。下面是可以用来禁用边距折叠的命令列表。
这里是测试场地
只需尝试将任何父-fix*类分配给div.container元素，或将任何类children-fix*分配给div.margin。选择一个最适合你需要的。
When
边距折叠被禁用，红色背景的div.absolute将被放置在页面的顶部。 div.absolute将与div.margin位于相同的Y坐标上
html, body { margin: 0; padding: 0; } .container { width: 100%; position: relative; } .absolute { position: absolute; top: 0; left: 50px; right: 50px; height: 100px; border: 5px solid #F00; background-color: rgba(255, 0, 0, 0.5); } .margin { width: 100%; height: 20px; background-color: #444; margin-top: 50px; color: #FFF; } /* Here are some examples on how to disable margin collapsing from within parent (.container) */ .parent-fix1 { padding-top: 1px; } .parent-fix2 { border: 1px solid rgba(0,0,0, 0);} .parent-fix3 { overflow: auto;} .parent-fix4 { float: left;} .parent-fix5 { display: inline-block; } .parent-fix6 { position: absolute; } .parent-fix7 { display: flex; } .parent-fix8 { -webkit-margin-collapse: separate; } .parent-fix9:before { content: ' '; display: table; } /* Here are some examples on how to disable margin collapsing from within children (.margin) */ .children-fix1 { float: left; } .children-fix2 { display: inline-block; } <div class="container parent-fix1"> <div class="margin children-fix">margin</div> <div class="absolute"></div> </div>
这里是jsFiddle的例子，你可以编辑
