css – 保证金堆叠在一起？

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

两个< div>都有保证金：1em,但当margin1的margin-bottom与margin2的margin-top碰撞时,两个保证金都相互叠加.见这里：http://jsfiddle.net/39XmC/

我所期待的是这样的：

两个< div> s实际上在每个边距上给出空格并且不在彼此的边缘上堆叠.

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

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

最佳答案

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

引自W3C：

In CSS,the adjoining margins of two or more Boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse,and the resulting combined
margin is called a collapsed margin.

Adjoining vertical margins collapse,except:

• Margins of the root element’s Box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining,its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.