父子DIV发生margin重叠

原文链接：http://blog.sina.com.cn/s/blog_40824a5d0102vymi.html

第一步:

设置两个父子div，均不设margin值。

《style type="text/css"》

      #container{

            height: 500px;

            background: blue;

      }

      #test{

            height: 100px;

            width: 100px;

            background: yellow;

      }

《/style》

-------------------------

《body》

      《div id="container"》

            《div id="test"》《/div》

      《/div》

《/body》

效果如下：

第二步：

只把父div的margin四边都设为100px。

#container{

            height: 500px;

            background: blue;

             margin:100px;

      }

效果如下：

这个比较好理解。

第三步：

只把父div和子div的margin四边都设为100px。

#container{

            height: 500px;

            background: blue;

             margin:100px;

      }

#test{

            height: 100px;

            width: 100px;

            background: yellow;

             margin:100px;

      }

效果如下：

第四步：

只把子div的margin四边都设为100px。

#test{

            height: 100px;

            width: 100px;

            background: yellow;

             margin:100px;

      }

效果如下：