今天做项目的时候，遇到了子块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
唐大力 阅读(976)
评论(2) 编辑 收藏 所属分类:
css