當外面的div設(shè)置了寬度,高度, 沒有設(shè)置padding及border時, 里面的div設(shè)置margin-top無效, 如下:
<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>查資料給出的解釋是:當兩個容器嵌套時,如果外層容器和內(nèi)層容器之間沒有別的元素,瀏覽器會把內(nèi)層元素的margin-top作用與父元素[注意: 父元素 沒有設(shè)置 padding及border]
如圖:
解決的辦法有兩個:
1、使用浮動來解決,即將子層CSS代碼改為:
.small{width: 100px; height: 100px; margin-top: 50px; background: #ccc; float:left;}
2、使用padding-top來解決,即:
.big{width: 300px; height: 200px; background: #eee; padding-top:50px; }