日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

里面的DIV設(shè)置margin-top無效

時間:2018-04-18 23:26:48 類型:HTML/CSS
字號:    

當外面的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; }