前段時間朋友做項目遇到一個問題，說是父子div，想讓子div下移50px，我隨口就說“直接margin-top就可以了”，結果，你們沒猜錯，打臉了，好痛！
這是我自己試了一遍的代碼：
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
以及樣式：
<style>
body{
margin:0px;
padding:0px;
}
.big{
width:400px;
height:400px;
background:#ccc;
}
.small{
width:200px;
height:200px;
background:#ff0000;
margin-top:50px;
}
</style>
結果出來就變成這樣了
這是什么鬼？我設置的只是子div啊，為什么父子一塊移動了？最后經過多方百度得知原因：
所有毗鄰的兩個或者多個盒元素的margin會合並為一並共享之。毗鄰的意思是同級或嵌套的盒元素，並且他們之間沒有非空內容、padding或者border分隔。
看到這個就可以想到幾個解決的方法了，一個是增加一個子元素的同級元素並放在該元素之前，也就是：
<div class="big">
<div class="add">增加的內容</div>
<div class="small"></div>
</div>
還有就是給父元素增加padding屬性或者border屬性，給子元素加是沒有效果的。
當然還有其他的方法，比如父元素增加overflow:hidden屬性，給父元素增加浮動或者position:absolute屬性也是可以的。