css - 保证金相互叠加？

Question

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

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

我所期待的是这样的：

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

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

1. 为什么[理论上]会发生这种情况？保证金不应该堆叠吗？
2. 这是浏览器的默认行为吗？因为我记得在一个没有这种行为的项目上工作。

Answer 1

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

引用W3C：

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

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

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

Answer 2

至于为什么会这样……

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

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

Answer 3

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

当你有

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 像素。