保证金相互叠加？

Question

我早就注意到，当两个块元素彼此相邻时，它们的边距相互叠加。像这样：

两个<div>都有margin: 1em，但当margin1的{​​{1}}与margin-bottom的{​​{1}}发生碰撞时，两个边距都只是堆叠在彼此身上。请参见此处：http://jsfiddle.net/39XmC/

我所期待的是这样的：

两个margin2实际上在每个边距上都有空格，并且不会在彼此的边距上叠加。

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

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

Answer 1

这种行为是正常的，它被称为折叠边距..

引自W3C：

  

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

     

相邻的垂直边距会崩溃，除了：

     

  
• 根元素框的边距不会折叠。
  
• 如果具有间隙的元素的顶部和底部边距相邻，则其边缘会随着后续兄弟的邻接边缘而折叠，但是所产生的边距不会随着父块的下边距而崩溃。
  

Answer 2

它是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>

段落的上边距为40px而不是60px。

Answer 3

至于为什么会发生这种情况......

边距不是关于元素的大小;他们只是呼吸空间。 （您可能会注意到，即使box-sizing也不允许您将边距视为元素大小的一部分。因为它不是。）

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