父子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;

    }

效果如下：