CSS中margin不会撑开盒子

  之前在上网查margin对盒子大小影响的时候发现全部都是关于“父子盒子同时定义margin-top|bottom，那么父盒子上边会塌陷至与子盒子上边重合”这样的问题，对于其他情况margin对盒子的影响没有涉猎，在此进行测试。

  那么在一个盒子内放置两个盒子

<div id="father">
        <div id="son1">
        </div>
        <div id="son2">
        </div>
    </div>

#father
{
    /* border: 0px dotted blue; */
    overflow: hidden;
    margin-top: 20px;
    height: 200px;
    width: 150px;
    background-color: red;
}
#son1
{
    margin-top: 20px;
    height: 100px;
    width: 100px;
    background-color: black;
}
#son2
{
    margin-top: 10px;
    height: 100px;
    width: 100px;
    background-color: green;
}

#father
{
    /* border: 0px dotted blue; */
    overflow: hidden;
    margin-top: 20px;
    height: 200px;
    width: 150px;
    background-color: red;
}
#son1
{
    margin-top: 100px;
    height: 100px;
    width: 100px;
    background-color: black;
}
#son2
{
    margin-top: 10px;
    height: 100px;
    width: 100px;
    background-color: green;
}

  因此，margin不会像padding一样撑开盒子，可用于大盒子内部子盒子间的分离而不用考虑对大盒子尺寸的影响