如何禁用保证金折叠？

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的文章折叠边距

Answer 2

您也可以使用旧的micro clearfix.

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

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

Answer 3

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:

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

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

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.1 to 0.05. As Chris Morgan mentioned in a comment bellow, and from this small test, it seems that indeed Firefox takes the 0.1px padding into consideration. Though, 0.05px seemes to do the trick.

Answer 4

overflow:hidden 防止崩溃边缘,但它没有副作用 - 即它......隐藏溢出.

除了这个和你所提到的,你只需要学习它并学习它们实际有用的这一天(每3到5年).

Answer 5

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

CSS*	修复
显示：流根；	\xe2\x9c\x85 父元素折叠 \xe2\x9d\x8c 兄弟元素折叠
显示：柔性； 弹性方向：列；	\xe2\x9c\x85 父元素折叠 \xe2\x9c\x85 兄弟元素折叠

\n

\n

*现代浏览器（不包括 IE11）支持display: flow-root和display: flex.

\n

例子

\n

\r\n

\r\n

display: flow-root;

\r\n

display: flex;
flex-direction: column;

\r\n

\r\n

\r\n

\n

Answer 6

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

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

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

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

Answer 7

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

显示：flex; flex-direction：列;

只要您可以只支持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

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