两个横向的 div，其中间的空白是：
左 div 的 margin-right + 右 div 的 margin-left。
两个纵向的 div，其上下的空白是：
上 div 的 margin-bottom，下 div 的 margin-top 的最大值。
以下是其他乱七八糟的了，需要耐心看，不感兴趣可以略过。
先看如下代码：
这段代码在各浏览器中的表现结果均相同，下图是从 Chrome 中的截图表现：
这说明：margin-top 是相对于 body 的，而 margin-left 是相对于外层 div 的。这里说相对于 body 可能不准确，比如在最外层再套一个 table,它就是相对 table 的 td 的了。
现在再看看另一段代码：
为外层 div 增加了 width，在 Firefox 中效果不变，在 IE 中变成了这样的：
这说明指定外层 div 的 width 后，在 IE 中，内层 div 的 margin-top 就是相对外层 div 的了。
最后再看看另一段代码：
把 width:100% 改为 position:absolute，这时，各浏览器中的表现结果均相同，内层 div 的 margin-top、margin-left 均是相对外层 div，并且外层 div 的宽度不再是 100%，而是紧缩到贴近内层 div 的 margin 边缘。
