css中外边距合并

最近在布局时遇到一个有趣的问题

<style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;height:50px;background:blue;margin:20px;}<style>

<div id="div1"> <div id="div2"> </div> </div>

实验了一下，结果是这样的：                这样问题来了：我设置的margin-top外边距20px到哪里去了？

 

我用firebug看了一下结构，发现div2的上下左右外边距都存在，那为什么div2会贴着div1呢？翻看了下w3s的文档，知道了这是外边距合并。查询地址外边距合并