css - 如何禁用边距折叠？

Question

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

Answer 1

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

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

使用填充或边框将仅在后一种情况下防止折叠。此外，任何与应用于父级overflow的默认值 ( ) 不同的值都将防止崩溃。visible因此，两者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 2

据我所知，禁用没有视觉影响的边距折叠的一个巧妙技巧是将父级的填充设置为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似乎可以解决问题。

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

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

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

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

阅读Apple 的 Safari CSS 参考以获得完整的解释。

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

Answer 7

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

Answer 8

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

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

这里是测试的游乐场

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

什么时候

• 边距折叠被禁用，div.absolute红色背景将位于页面的最顶部。
• 边距正在折叠 div.absolute将定位在与相同的 Y 坐标处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 10

尝试

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

或者

{
   display:grid;
}

Answer 11

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

Answer 12

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

.parent {
  display: grid
}