要了解margin的一些知识

两个块级元素竖直之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者

嵌套盒子之之间的margin
子块的margin将以父块的content为参考

margin collapse的概念并不止于上下2个元素的margin重叠后合并问题，可以试试这个
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>

<style>
  #a1 { height: 20px; margin-bottom: 20px; background: red; }
  #a2 { height: 0; overflow: hidden; margin: 30px 0; }
  #a3 { height: 20px; margin-top: 40px; background: green; }
</style>

可以看到，由于#a2没有高度，他的上下margin重合，又分别与#a1的下margin、#a3的上margin重合，因此最后4个margin合并，变成了总共40px的边距，这就是margin collapse的真正意义，所有相接的margin通通合并

在W3C上看过相似的说法，不过现实中还没有碰到这种问题。。。

关于w3c 里面介绍的 margin collapse 貌似我不太明白。

你测出来是88px的话，是因为body有个默认的8px的margin，样式里加个body { margin: 0; }重置就行了，真正的高度是40的margin+20的红块+20的绿块一共是80px