CSS 如何禁用边距折叠？

Question

提问by kjo

Is there a way to disable margin-collapsing altogether? The only solutions I've found (by the name of "uncollapsing") entail using a 1px border or 1px padding. I find this unacceptable: the extraneous pixel complicates calculations for no good reason. Is there a more reasonable way to disable this margin-collapsing?

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

Answer 1

回答by hqcasanova

There are two main types of margin collapse:

边距崩溃有两种主要类型：

Collapsing margins between adjacent elements
Collapsing margins between parent and child elements

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

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflowdifferent from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: autoand overflow: hiddenwill have the same effect. Perhaps the only difference when using hiddenis the unintended consequence of hiding content if the parent has a fixed height.

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

Other properties that, once applied to the parent, can help fix this behaviour are:

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

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

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

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

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

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

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

Sources: Sitepoint's article Collapsing Margins

来源：Sitepoint 的文章Collapsing Margins

Answer 2

回答by Blackgrid

You can also use the good old micro clearfix for this.

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

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

See updated fiddle: http://jsfiddle.net/XB9wX/97/

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

Answer 3

回答by Nicu Surdu

One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:

据我所知，禁用没有视觉影响的边距折叠的一个巧妙技巧是将父级的填充设置为0.05px：

.parentClass {
    padding: 0.05px;
}

The padding is no longer 0 so collapsing won't occur anymore but at the same time the padding is small enough that visually it will round down to 0.

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

If some other padding is desired, then apply padding only to the "direction" in which margin collapsing is not desired, for example padding-top: 0.05px;.

如果需要其他一些填充，则仅将填充应用于不需要边距折叠的“方向”，例如padding-top: 0.05px;。

Working example:

工作示例：

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

Edit:changed the value from 0.1to 0.05. As Chris Morgan mentioned in a comment bellow, and from this small test, it seems that indeed Firefox takes the 0.1pxpadding into consideration. Though, 0.05pxseemes to do the trick.

编辑：将值从更改0.1为0.05。正如 Chris Morgan 在下面的评论中提到的，从这个小测试来看，Firefox 似乎确实考虑了0.1px填充。虽然，0.05px似乎可以解决问题。

Answer 4

回答by Litek

overflow:hiddenprevents collapsing margins but it's not free of side effects - namely it... hides overflow.

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

Apart form this and what you've mentioned you just have to learn live with it and learn for this day when they are actually useful (comes every 3 to 5 years).

除了这一点以及您提到的内容之外，您只需要学习生活并在它们真正有用的时候学习（每 3 到 5 年一次）。

Answer 5

回答by Daniel Koster

Actually, there is one that works flawlessly:

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

display: flex; flex-direction: column;

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

as long as you can live with supporting only IE10 and up

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

回答by Dan Carter

Every webkit based browser should support the properties -webkit-margin-collapse. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse (default), discard (sets margin to 0 if there is a neighboring margin), and separate (prevents margin collapse).

每个基于 webkit 的浏览器都应该支持属性-webkit-margin-collapse。还有一些子属性可以仅将其设置为顶部或底部边距。您可以给它设置collapse（默认）、discard（如果有相邻边距将边距设置为0）和separate（防止边距塌陷）的值。

I've tested that this works on 2014 versions of Chrome and Safari. Unfortunately, I don't think this would be supported in IE because it's not based on webkit.

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

Read Apple's Safari CSS Referencefor a full explanation.

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

If you check Mozilla's CSS webkit extensions page, they list these properties as proprietary and recommend not to use them. This is because they're likely not going to go into standard CSS anytime soon and only webkit based browsers will support them.

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

Answer 7

回答by Genzo

I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements.

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

Answer 8

回答by Buksy

I had similar problem with margin collapse because of parent having positionset to relative. Here are list of commands you can use to disable margin collapsing.

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

HERE IS PLAYGROUND TO TEST

这里是测试的游乐场

Just try to assign any parent-fix*class to div.containerelement, or any class children-fix*to div.margin. Pick the one that fits your needs best.

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

When

什么时候

margin collapsingis disabled, div.absolutewith red background will be positioned at the very top of the page.
margin is collapsingdiv.absolutewill be positioned at the same Y coordinate as div.margin

边距折叠被禁用，div.absolute红色背景将位于页面的最顶部。
margin is collapsingdiv.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>

Here is jsFiddlewith example you can edit

这是jsFiddle示例，您可以编辑

Answer 9

回答by Whisher

For your information you could use grid but with side effects :)

对于您的信息，您可以使用 grid 但有副作用:)

.parent {
  display: grid
}

Answer 10

回答by Chuanqi Sun

In newer browser (excluding IE11), a simple solution to prevent parent-child margin collapsing is to use display: flow-root. However, you would still need other techniques to prevent adjacent element collapsing.

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

DEMO (before)

演示（之前）

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

DEMO (after)

演示（后）

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

CSS 如何禁用边距折叠？

提问by kjo

回答by hqcasanova

回答by Blackgrid

回答by Nicu Surdu

回答by Litek

回答by Daniel Koster

回答by Dan Carter

回答by Genzo

回答by Buksy

HERE IS PLAYGROUND TO TEST

这里是测试的游乐场

回答by Whisher

回答by Chuanqi Sun

相关推荐

最近更新

标签

CSS 如何禁用边距折叠？

提问by kjo

回答by hqcasanova

回答by Blackgrid

回答by Nicu Surdu

回答by Litek

回答by Daniel Koster

回答by Dan Carter

回答by Genzo

回答by Buksy

HERE IS PLAYGROUND TO TEST

这里是测试的游乐场

回答by Whisher

回答by Chuanqi Sun

相关推荐

CSS CSS3 - 通过 JavaScript 动画 margin-left 属性

CSS 在 BS3 中创建一个圆形按钮

CSS CSS3 选择器：具有类名的第一个类型？

CSS LESS 混合变量类名

相关推荐

最近更新

标签