display: flow-root;

display: 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>

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

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

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

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

浮动:左/右 位置:绝对的 显示方式:inline-block / flex / grid

您可以在这里测试所有这些:http://jsfiddle.net/XB9wX/1/。

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

来源:Sitepoint的文章“崩溃边缘”

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

这里是测试场地

只需尝试将任何父-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的例子，你可以编辑

为了防止姐妹页边距崩溃，添加display: inline-block;给兄弟姐妹中的一个(一个就足够了，但你可以给两个都加)。

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

显示: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 >

display: flow-root;

display: 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>