保证金相互叠加？答案

【问题标题】：Margin stacks on each other?保证金相互叠加？
【发布时间】：2013-11-05 15:53:59
【问题描述】：

我早就注意到，当两个块元素并排放置时，它们的边距会相互堆叠。像这样的：

两个<div>s 都有margin: 1em，但是当margin1 的margin-bottom 与margin2 的margin-top 碰撞时，两个边距只是相互叠加。看这里：http://jsfiddle.net/39XmC/

我期待的是这样的：

<div>s 实际上在每个边距上都给出了空格，并且不会在彼此的边距上堆叠。

我知道这可以通过floating 或溢出元素来解决。我的问题：

为什么[理论上]会发生这种情况？边距不应该堆叠吗？
这是浏览器的默认行为吗？因为我记得我曾经做过一个没有这种行为的项目。

【问题讨论】：

标签： css margin

【解决方案1】：

这种行为是正常的，它被称为 Collapsing Margins..

引用W3C:

在 CSS 中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成一个边距。边距据说以这种方式组合会崩溃，并且由此产生的组合边距称为折叠边距。

相邻的垂直边距折叠，除了：

根元素框的边距不会折叠。

如果具有间隙的元素的上边距和下边距相邻，则其边距会与后续兄弟的相邻边距一起折叠，但生成的边距不会与父块的底部边距折叠。

【讨论】：

谢谢。我在基础阶段肯定错过了这一点。

【解决方案2】：

至于为什么会这样……

边距与元素大小无关；他们只是关于喘息的空间。（您可能会注意到，即使box-sizing 也不会让您将边距视为元素大小的一部分。因为它不是。）

1em 的边距表示“我需要在自己周围至少留出 1em 的空间才能看起来不拥挤。”如果你有两个相邻的元素都说他们需要至少 1em 的空间，那么将它们隔开 1em 可以满足这两个条件，同时浪费最少的空间。如果您牢记这一点，折叠边距的规则会更有意义。

【讨论】：

确实如此，这就是为什么即使像 box-sizing: margin-box 属性这样的东西也没有意义 if one were to propose it。
在此之前，我一直认为边距是元素本身的一部分。当父元素溢出或元素本身浮动时，这种行为（边距折叠）会发生变化。为什么会这样？
因为花车很奇怪？ :) 我认为这是因为浮动元素的边缘通常以 inside 另一个元素结束，所以折叠边距的想法有点超出了窗口

【解决方案3】：

它是 CSS 的一个属性。请参考this one

当你有

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 40px 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

和html一样

<h1>Heading Content</h1>
<div>
  <p>Paragraph content</p>
</div>

段落顶部的边距将是 40 像素，而不是 60 像素。

【讨论】：