今天做項目的時候，遇到了子塊1和父塊的外邊距合并問題。一旦設置的margin-top，父塊也跟著向下浮動了（如圖1）。具體原因不詳細解釋，請看
css 外邊距合并問題。
官方的解決方法是為父塊加上邊框之類的東西（但是border不能為0）。但是這樣會影響頁面的美觀。所以想了一下之后，決定在父塊中再加入一個空白的字塊2（高度不能為0），這樣原來的字塊1就不會和父塊合并。
效果圖如下：
圖1
圖2
實現代碼如下（簡要）：
html:<div id="whole">
<div style="height:10px;"></div>
<div id="the-table"></div>
</div>
#whole{
background-image:url("../images/bg/client_common_bg.jpg");
width:1006px;
height:513px;
margin:0px auto;
float:none;
}
#the-table{
margin:0px auto;
margin-top:50px;
width:605px;
}
posted on 2011-10-28 10:34
唐大力 閱讀(988)
評論(2) 編輯 收藏 所屬分類:
css