有没有办法完全禁用边距折叠?我发现的唯一解决方案(称为“不折叠”)需要使用1px边框或1px填充。我觉得这是不可接受的:多余的像素毫无理由地使计算复杂化。是否有更合理的方法来禁用边缘折叠?
当前回答
事实上，有一个完美无缺的方法:
显示:flex; flex-direction:列;
只要你能接受IE10及以上版本
.container { 显示:flex; flex-direction:列; 背景:# ddd; 宽度:15他们; ｝ .square { 保证金:15 px; 高度:3他们; 背景:黄色; ｝ < div class = "容器" > < div class = "广场”> < / div > < div class = "广场”> < / div > < div class = "广场”> < / div > < / div > < div class = "容器" > < div class = "广场”> < / div > < div class = "广场”> < / div > < div class = "广场”> < / div > < / div >
其他回答
我知道这是一个非常老的帖子，但只是想说，在父元素上使用flexbox将禁用它的子元素的边距折叠。
据我所知，禁用边距折叠的一个巧妙技巧是设置父边距为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似乎可以解决这个问题。
为了防止姐妹页边距崩溃，添加display: inline-block;给兄弟姐妹中的一个(一个就足够了，但你可以给两个都加)。
供你参考 网格，但有副作用:)
.parent {
display: grid
}
| CSS* | Fixes |
|---|---|
display: flow-root; |
✅ Parent element collapse ❌ Sibling element collapse |
display: flex; |
✅ 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>
