这里是测试的地方

Question

有没有办法完全禁用边缘折叠？我发现的唯一解决方案（名称为“uncollapsing”）需要使用1px边框或1px填充。我发现这是不可接受的：无关的像素使计算变得复杂，没有充分的理由。是否有更合理的方法来禁用此边距折叠？

Answer 1

有两种主要类型的保证金崩溃：

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

使用填充或边框仅防止在后一种情况下崩溃。此外，应用于父级的任何overflow值与其默认值（visible）不同都会阻止崩溃。因此，overflow: auto和overflow: hidden都会产生相同的效果。使用hidden时唯一的区别可能是如果父级具有固定高度，则隐藏内容会产生意外后果。

其他属性，一旦应用于父级，可以帮助解决此问题：

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

您可以在此处测试所有这些内容：http://jsfiddle.net/XB9wX/1/。

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

来源：Sitepoint的文章 Collapsing Margins

Answer 2

您也可以使用旧的micro clearfix。

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

请参阅更新的小提琴：http://jsfiddle.net/XB9wX/97/

Answer 3

根据我所知，禁用边缘折叠的一个巧妙方法就是将父级的填充设置为0.05px：

.parentClass {
    padding: 0.05px;
}

填充不再为0，因此折叠不再发生，但同时填充足够小，在视觉上它将向下舍入为0.

如果需要其他填充，则仅将填充应用于＆＃34;方向＆＃34;其中不需要边距折叠，例如padding-top: 0.05px;。

工作示例：

＆＃13;

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

＆＃13;

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

＆＃13;

修改：将值从0.1更改为0.05。正如Chris Morgan在评论中提到的那样，从this small test开始，似乎Firefox确实考虑了0.1px填充。虽然，0.05px似乎可以做到这一点。

Answer 4

overflow:hidden可以防止崩溃边距，但它不会产生副作用 - 即它......隐藏溢出。

除了这个和你提到的内容之外，你只需要学习它并学习它们实际有用的这一天（每3到5年）。

Answer 5

每个基于webkit的浏览器都应支持属性-webkit-margin-collapse。还有一些子属性只能为顶部或底部边距设置它。您可以给它折叠值（默认值），丢弃（如果存在相邻边距，则将边距设置为0），并分开（防止边距崩溃）。

我已经测试过这适用于2014版Chrome和Safari。不幸的是，我不认为这会在IE中得到支持，因为它不是基于webkit。

阅读Apple's Safari CSS Reference以获取完整说明。

如果您选中Mozilla's CSS webkit extensions page，他们会将这些属性列为专有属性，并建议不要使用它们。这是因为他们很可能不会很快进入标准CSS，只有基于webkit的浏览器会支持它们。

Answer 6

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

Answer 7

实际上，有一个可以完美运作：

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

Answer 8

由于父级position设置为相对，因此我遇到了类似边距崩溃的问题。以下是可用于禁用边距折叠的命令列表。

这里是测试的地方

只需尝试将任何parent-fix*类分配给div.container元素，或将任何类children-fix*分配给div.margin。选择最符合您需求的那个。

当

保证金折叠 已停用，红色背景的div.absolute将位于页面的最顶部。
边距正在折叠 div.absolute将与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>

以下是 jsFiddle ，您可以编辑

Answer 9

在较新的浏览器（不包括IE11）中，防止父子边距崩溃的一种简单解决方案是使用display: flow-root。但是，您仍然需要其他技术来防止相邻元素崩溃。

演示（之前）

.parent {
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

演示（之后）

.parent {
  display: flow-root;
  background-color: grey;
}

.child {
  height: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: blue;
}

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Answer 10

您可以使用的信息网格，但有副作用：）

.parent {
  display: grid
}

Answer 11

为防止同级之间的边距塌陷，请将 display: inline-block; 添加到其中一个同级中（一个就足够了，但您可以将其添加到两个中）。

如何禁用保证金折叠？

11 个答案:

这里是测试的地方