为什么CSS余量：1PX 0 1PX 0不等于边距的间距：2PX 0 0 0答案

【问题标题】：Why does CSS margin: 1px 0 1px 0 not equate spacing of margin: 2px 0 0 0为什么CSS余量：1PX 0 1PX 0不等于边距的间距：2PX 0 0 0
【发布时间】：2015-10-16 23:11:43
【问题描述】：

我一直认为底部和顶部边距与间距元素中较厚的底部边距相同，但事实并非如此：

<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/

【问题讨论】：

For what reason margin collapse rules were introduced in CSS? 的可能副本
虽然从技术上讲是上一条评论中链接的问题的副本，但对于第一次接触边距折叠概念的人来说，这个问题非常集中、直观，并且更容易理解。保持这个问题开放应该可以让一些可能发布其他概念重复的用户清楚。

标签： css

【解决方案1】：

因为margin collapsing。

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

有时使用填充而不是边距可以快速解决问题。

【讨论】：