div中margin和padding的一些使用及注意事项

今天使用div做间距的时候，发现两个嵌套的div，内部div的margin没有相对与上一级div生效

<div id="large-div">
            <div id="small-div"></div>
</div>

#large-div{
                background-color: #000000;
                width: 500px;
                height: 400px;
            }

#small-div{
　　　　 width: 100px;

　　　　height: 100px;

　　　　margin: 20px;

　　　　background-color: #fff000;
}

这是因为块级元素垂直相邻的外边距会合并导致的

左右两个外边距相遇最终边距为右边距和左边距之和

上下两个外边距相遇最终边距为上下中最大的那个间距

 

需要分离

　　　　1.overflow:hidden 隐藏清除溢出

　　　　2.position:absolut将其中一个div设置为绝对定位