保证金相互叠加？

Question

我很早就注意到,当两个块元素彼此相邻时,它们的边缘相互叠加.像这样的东西:

无论<div>■找margin: 1em,但是当margin1的margin-bottom有冲突margin2的margin-top,都只是保证金堆叠在彼此.见这里:http://jsfiddle.net/39XmC/

我所期待的是这样的:

两者<div>实际上在每个边距上都给出了空格,并且没有在彼此的边缘上叠加.

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

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

Answer 1

这种行为是正常的,它被称为崩溃边缘..

引自W3C:

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.

相邻的垂直边距崩溃,除了:

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

Answer 2

至于为什么会这样……

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

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