如何禁用边缘折叠？
有没有一种方法来完全禁用边缘折叠？ 我发现的唯一的解决scheme（通过名称“uncollapsing”）需要使用1px边框或1px填充。 我觉得这是不可接受的：无关的像素复杂的计算没有很好的理由。 有没有更合理的方式来禁用这个边缘崩溃？
有两种主要的保证金崩溃types：
- 折叠相邻元素之间的边距
- 父母与子女成分之间的差距缩小
只有在后一种情况下，使用填充或边框才能防止崩溃。 而且，任何overflow值不同于默认（ visible ）应用于父项的overflow值将防止崩溃。 因此， overflow: auto和overflow: hidden将具有相同的效果。 也许使用hidden的唯一区别是隐藏内容的意想不到的后果，如果父母有一个固定的高度。
其他属性，一旦应用于父，可以帮助解决这一行为是：
-
float: left / right -
position: absolute -
display: inline-block
你可以在这里testing它们： http : //jsfiddle.net/XB9wX/1/ 。
我应该补充说，像往常一样，Internet Explorer是个例外。 更具体地说，在IE 7中，当为父元素指定某种布局（如width时，边距不会折叠。
来源：Sitepoint的文章折叠边缘
你也可以使用这个老的微型clearfix。
#container:before, #container:after{ content: ' '; display: table; }
查看更新的小提琴： http : //jsfiddle.net/XB9wX/97/
一个简单的方法来禁用没有视觉冲击的边缘折叠，据我所知，将父级的填充设置为0.1px ：
.parentClass { padding: 0.1px; }
填充不再是0，所以崩溃不会再发生，并且填充小于0.5px，因此视觉上它将舍入到0。
如果需要其他填充，则仅将填充应用于不需要使用边距折叠的“方向”，例如padding-top: 0.1px; 。
工作示例：
.noCollapse { padding: 0.1px; } .parent { background-color: red; width: 150px; } .children { margin-top: 50px; background-color: lime; width: 100px; height: 100px; }
<h3>Border collapsing</h3> <div class="parent"> <div class="children"> </div> </div> <h3>No border collapsing</h3> <div class="parent noCollapse"> <div class="children"> </div> </div>
overflow:hidden可以防止崩溃边缘，但它不是免费的副作用 – 即它…隐藏溢出。
除了这一点以及你所提到的，你必须学习现实生活，并且在他们真正有用的时候学习（每三到五年一次）。
每个基于webkit的浏览器都应该支持属性-webkit-margin-collapse。 也有子属性只设置它的顶部或底部边距。 你可以给它的值崩溃（默认），放弃（如果有邻近的边界设置边距为0），并单独（防止边缘崩溃）。
我已经testing了这个版本的Chrome和Safari 2014版本。 不幸的是，我不认为这将在IE浏览器支持，因为它不是基于webkit。
请阅读Apple的Safari CSS参考资料以获取完整说明。
如果您查看Mozilla的CSS webkit扩展页面 ，他们将这些属性列为专有，并build议不要使用它们。 这是因为他们很可能不会很快进入标准的CSS，只有基于webkit的浏览器才会支持它们。
我知道这是一个很老的post，但只是想说，在父元素上使用flexbox会禁用其子元素的边缘折叠。
由于父母的position设置为相对的，我也有类似的边缘崩溃问题。 以下是可用于禁用边缘折叠的命令列表。
这里是试玩
只要尝试将任何parent-fix*类分配给div.container元素，或将任何class children-fix*分配给div.margin 。 select一个最适合您的需求。
什么时候
- 边缘折叠被禁用 ，红色背景
div.absolute将被定位在页面的最顶部。 - 边距折叠
div.absolute将被定位在与div.margin相同的Y坐标div.margin
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>
为了您的信息，你可以使用网格，但副作用:)
.parent { display: grid }
其实，有一个完美的作品：
显示：flex; flex-direction：column;
只要你只能支持IE10和以上
.container { display: flex; flex-direction: column; background: #ddd; width: 15em; } .square { margin: 15px; height: 3em; background: yellow; }
<div class="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div>
