小开

overflow:hidden防止边缘崩溃，但它不是没有副作用-即它…隐藏溢出。

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

小开

最佳答案

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

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

只有在后一种情况下，使用填充或边框才能防止崩溃。同样，任何overflow不同于其默认值(visible)的值应用到父类都将防止崩溃。因此，overflow: auto和overflow: hidden将具有相同的效果。也许使用hidden时唯一的区别是，如果父对象具有固定的高度，则隐藏内容会导致意想不到的后果。

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

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

你可以在这里测试它们:http://jsfiddle.net/XB9wX/1/。

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

来源:Sitepoint的文章缩边距

小开

您还可以使用老式的micro clearfix。

#container::before, #container::after{
content: ' ';
display: table;
}

参见更新后的fiddle: http://jsfiddle.net/XB9wX/97/

小开

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

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

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

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

小开

据我所知，禁用边距折叠的一个巧妙技巧是将父对象的padding设置为0.05px:

.parentClass {
padding: 0.05px;
}

填充不再是0，所以不会再发生折叠，但同时填充足够小，从视觉上看，它会四舍五入到0。

如果需要其他填充，则只对不需要边距折叠的“方向”应用填充，例如padding-top: 0.05px;。

< >强工作的例子:

.noCollapse {
padding: 0.05px;
}


.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>

编辑:将值从0.1更改为0.05。正如Chris Morgan在下面的评论中提到的，从这个小测试来看，Firefox似乎确实考虑了0.1px填充。不过，0.05px似乎可以做到这一点。

小开

我知道这是一个非常老的帖子，但只是想说，在父元素上使用flexbox将禁用它的子元素的边距折叠。

小开

我有类似的问题与边际崩溃，因为父母有position设置为相对。下面是可以用来禁用边距折叠的命令列表。

这里是测试场地

试着将任意parent-fix*类赋值给div.container元素，或将任意children-fix*类赋值给div.margin。选择一个最适合你需要的。

当

空白崩溃是禁用，带有红色背景的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的例子，你可以编辑

小开

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

.parent {
display: grid
}

小开

事实上，有一个完美无缺的方法:

< p >显示:flex; flex-direction:列;< / p >

只要你能接受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>

小开

CSS *	修复
显示:< >强flow-root < / >强;	✅父元素崩溃 ❌兄弟元素崩溃
显示:flex; flex-direction: column;	✅父元素崩溃 ✅兄弟元素崩溃

*现代浏览器(不包括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>

小开

为了防止兄弟姐妹之间的空白崩溃，将display: inline-block;添加到其中一个兄弟姐妹(一个就足够了，但你可以将它添加到两个兄弟姐妹中)。

小开

试一试

{
display:flex;
flex-direction:column;
}

或

{
display:grid;
}

如何禁用边距折叠?

这里是测试场地

例子