當(dāng)外面的div設(shè)置了寬度,高度, 沒(méi)有設(shè)置padding及border時(shí), 里面的div設(shè)置margin-top無(wú)效， 如下:
<style type="text/css">
.top{width: 300px; height: 50px; background: #ddd;}
.big{width: 300px; height: 200px; background: #eee; }
.small{width: 100px; height: 100px; margin-top: 50px; background: #ccc;}
</style>
<div class="top">top</div>
<div class="big">
<div class="small">small</div>
</div>
查資料給出的解釋是：當(dāng)兩個(gè)容器嵌套時(shí),如果外層容器和內(nèi)層容器之間沒(méi)有別的元素,瀏覽器會(huì)把內(nèi)層元素的margin-top作用與父元素[注意： 父元素 沒(méi)有設(shè)置 padding及border]
如圖：
解決的辦法有兩個(gè)：
1、使用浮動(dòng)來(lái)解決，即將子層CSS代碼改為：
.small{width: 100px; height: 100px; margin-top: 50px; background: #ccc; float:left;}
2、使用padding-top來(lái)解決，即：
.big{width: 300px; height: 200px; background: #eee; padding-top:50px; }
