如何禁用边距折叠？

Question

有没有办法完全禁用边距折叠？我找到的唯一解决方案（称为“展开”）需要使用 1px 边框或 1px 填充。我觉得这是不可接受的：无关的像素无缘无故地使计算复杂化。有没有更合理的方法来禁用这种边距折叠？

Answer 1

试试

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

或

{
   display:grid;
}

Answer 2

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

Answer 3

您也可以为此使用良好的旧 micro clearfix。

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

查看更新的小提琴：http://jsfiddle.net/XB9wX/97/

Answer 4

在较新的浏览器（不包括 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 5

边距折叠有两种主要类型：

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

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

一旦应用于父级，可以帮助修复此行为的其他属性是：

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

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

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

来源：Sitepoint 的文章Collapsing Margins

Answer 6

每个基于 webkit 的浏览器都应该支持属性-webkit-margin-collapse。还有一些子属性只为顶部或底部边距设置它。您可以为其指定值折叠（默认）、丢弃（如果有相邻边距，则将边距设置为 0）和分离（防止边距折叠）。

我已经测试过这适用于 2014 版的 Chrome 和 Safari。不幸的是，我认为 IE 不支持此功能，因为它不是基于 webkit。

阅读Apple's Safari CSS Reference了解完整说明。

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

Answer 7

据我所知，禁用没有视觉影响的边距折叠的一个巧妙技巧是将父级的填充设置为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 在下面的评论中提到的以及来自this small test 的那样，Firefox 似乎确实考虑了0.1px 填充。不过，0.05px 似乎可以解决问题。

Answer 8

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

显示：弹性； 弹性方向：列；

只要你能忍受只支持 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 9

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

.parent {
  display: grid
}

Answer 10

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

这里是测试的游乐场

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

什么时候

• margin collapsing被禁用，红色背景的div.absolute将位于页面的最顶部。
• ma​​rgin is collapsing 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 11

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

Answer 12

overflow:hidden 防止折叠边距，但它并非没有副作用 - 即它...隐藏溢出。

除了这个和你提到的之外，你只需要与它一起学习，并在它们真正有用的那一天学习（每 3 到 5 年出现一次）。