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

效果如下：