css:纵向排列的div中间有间隙的问题

刚才修改页面div整合时,发现附加图片背景后,明显上下两个div之间有间隙出现,于是低效率又来了……改margin-bottom为0与margin-top为0都不行,囧死……

后来网上搜搜,看了许久,才看到亮点……就是margin改为负值……于是乎,试了一下,真的可以:将上面的div css修改margin-bottom=-18px,然后就把两个div在外观上真实拼接了,

可是随后又出现其他问题,即可能出现使用同一款css,在上一个div底部有内容的情况下,会导致该内容覆盖到下一个div的顶部空间处,一旦两者都有内容,就会重叠……

于是乎,我的做法是在下一个div顶部加若干个<br>……

 

为啥两个div之间会有间隙呢?

附上代码:

css:

#wrap{
margin
:0 auto;
width
:1000px;
padding
:0px;
font-family
: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif;
}

#header
{
margin
:0 auto;
background-image
:url(../image/wrap_back_mt1_header.png);
background-repeat
:no-repeat;
width
:1000px;
clear
:both;

}

#header .logo
{
padding-top
:55px;
margin-left
:30px;
height
:120px;
background-repeat
:no-repeat;
background-position
:left;
background-image
:url(../image/logoback_meitu.png);
}

.lead
{
margin
:auto;
width
:900px;
height
:50px;
border
:thick;
background-image
:url(../image/nav_back_pic.png);


}


.nav li
{
float
:left;
text-align
:center;
color
:#000;
width
:78px;
height
:27px;
margin-top
:11px;
margin-right
:1px;
padding
:5px;
list-style-type
:none;
border
:thick;
background-image
:url(../image/li_gh.png);
}
.nav a
{
text-decoration
:none;
}
.nav a li
{

}
.nav a:hover li
{
background-image
:url(../image/li_gn.png);

}
#contentBack
{
margin-top
:0px;
width
:100%;
background-image
:url(../image/wrap_back_mt1_block.png);
background-repeat
:repeat-y;


}

#content
{
margin
:0 auto;
width
:900px;
clear
:both;


}

#comment
{
margin
:0 auto;
width
:900px;
clear
:both;
}

#footerBack
{
margin-top
:0px;
width
:100%;
height
:200px;
background-image
:url(../image/wrap_back_mt1_footer.png);
background-repeat
:no-repeat;
}

#footer
{
width
:900px;
border-top
:#000 solid medium;
padding
:2px 0px;
margin
:0 auto;
height
:25px;
border-width
:2px;
border-color
:#000;
background-color
:#CC3;
}

.right
{
float
:right;
}
.left
{
float
:left;
}

html Demo:(实际问题在demo源码中)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>{$title} - test</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">
</div>
<div class="lead">
<ul class="nav">
<a href="#"><li>home</li></a>
<a href="#"><li>hot home</li></a>
<a href="#"><li>your home</li></a>
<a href="#"><li>mani home</li></a>
</ul>
</div>
</div>
<div id="contentBack">
<!--主体部分-->
<div id="content">
<h1>首页.</h1>
&#165
test
find
</div>

</div><!--end of contentBack-->
<div id="footerBack">
<!---->
<div id="footer">
<div class="left">版权归123456所有</div>
<div class="right">BY 123456</div>
</div>
</div>
</div> <!--end of wrap-->
</body>
</html>


之前一直纠结着在div的margin为0却失败的问题,

http://segmentfault.com/question/639/%E4%B8%A4%E4%B8%AA%E5%90%8C%E7%BA%A7div%E4%B8%AD%E9%97%B4%E7%9A%84%E7%A9%BA%E9%9A%99%E5%A6%82%E4%BD%95%E6%B6%88%E9%99%A4?answer=1405#top
上提问,给力的朋友点出了重点:

浏览器默认样式中,h1等标题元素默认拥有一定的margin值,#header和#contentBack之间的空隙,便是由#content中的h1引起的,在chrome中,用审查工具,一看便知!
posted @ 2011-10-30 13:48  Dont  阅读(...)  评论(...编辑  收藏