如何禁用保证金折叠？

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。

如果需要一些其他填充，则仅将填充应用于不希望边缘折叠的“方向”，例如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。正如克里斯摩根在评论中提到的那样，并且来自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;弯曲方向：柱;

只要你能够支持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设置为相对而我有边缘崩溃的类似问题。以下是可用于禁用边距折叠的命令列表。

HERE IS PLAYGROUND TO TEST

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

Answer 9

为了您的信息，您可以使用网格，但有副作用:)

.parent {
  display: grid
}