为什么CSS边距：1px 0 1px 0不等于边距间距：2px 0 0 0

Question

我一直认为底部和顶部边距与间距元素中较粗的底部边距相同，但不是：

<h4>Margin: 1px 0 1px 0</h4>
  <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div>
  <div style="background-color: gray;margin: 1px 0 1px 0;height: 50px;"></div>
<br>
<h4>Margin: 2px 0 0 0</h4>
  <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div>
  <div style="background-color: gray;margin: 2px 0 0 0;height: 50px;"></div>

这是为什么？ Safari FF和chrome都一样。

http://jsfiddle.net/vzp0kL9d/

Answer 1

这是因为margin collapsing。

  

块的顶部和底部边距有时会合并（折叠）为单个边距，其大小是合并到其中的边距中的最大边距，这种行为称为边距折叠。

有时可以快速修复使用填充而不是边距。