css - margin 相互叠加？

Question

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

两者都是 <div>我们有margin: 1em ，但是当margin1的 margin-bottom与 margin2 相撞的 margin-top ，两个 margin 只是相互叠加。在这里查看:http://jsfiddle.net/39XmC/

我期待的是这样的:

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

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

1. 为什么 [理论上] 会发生这种情况？ margin 不应该叠加吗？
2. 这是浏览器的默认行为吗？因为我记得我从事的元素没有这种行为。

Answer 1

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

引自W3C :

In CSS, the adjoining margins of two or more boxes (which might ormight not be siblings) can combine to form a single margin. Marginsthat combine this way are said to collapse, and the resulting combinedmargin 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.