css中外边距合并

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

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

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

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

 

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

原文地址:https://www.cnblogs.com/hehewuyuana/p/5943959.html