最近遇到的问题是div有背景图，纵向排列的同级div之间为何会产生空隙？margin：0，padding：0好像都消除不了，而margin-bottom：-x px；可以，但觉得这么做，有点取巧，有其他方法么？出现这种情况的根本原因是什么呢？求指教，ps：比较菜
#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
<!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>
¥
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>
我也没发现你说的空隙，但是你的写法有问题。XHTML 中 a 是 inline 元素， li 是 block 元素，a 不应该包含 li，应该写成：
<ul class="nav">
<li><a href="#">home</a></li>
....
</ul>览器中 ul 有一个默认 margin 值，所以你应该给他赋值进行覆盖ul.nav { margin: 0; }
还有你的 CSS 中有两个地方有问题，一个是 .lead 的 margin 写法可能引起的奇怪的问题，建议改成margin: 0 auto;
这样应该就解决了吧。
给你的demo中，#content下的h1加一条样式
h1{
margin: 0;
}你所说的空隙就消失了，然后看下面这个demo，应该就明白了
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Title</title>
<style type="text/css">
*{ /*注意*/
margin: 0;
padding: 0;
}
#foo{
background: red;
}
#bar{
margin-top: 10px; /*注意*/
background: blue;
color: #fff;
}
#bar-hd{
margin-top: 20px; /*注意*/
}
</style>
</head>
<body>
<div id="foo">
<h1 id="foo-hd">Sample Text</h1>
</div>
<div id="bar">
<h1 id="bar-hd">盒模型中规定了垂直边界重叠，这个h1有一个向上的margin值（20px），叠加到了父元素#bar上，虽然#bar本身有一个向上的margin值（10px），但重叠部分取其大者，因此#foo和#bar之间出现的是20px的空隙</h1>
</div>
<br />
<p>然后来解答你这个demo中的问题，在你的代码中，首先没有做css reset，如果你把我这个demo中的：</p>
<pre>
*{
margin: 0;
padding: 0;
}
</pre>
<p>去掉，你会发现，#foo上也出现了空白。浏览器默认样式中，h1等标题元素默认拥有一定的margin值，在你自己这个demo中，#header和#contentBack之间的空隙，便是由#content中的h1引起的，在chrome中，你用审查工具，一看便知！</p>
<p>关于垂直边界重叠的更多信息，例如：如何避免（如你所见，添加border就是一个方法），请参考css权威指南，或者搜索，实在不能一一阐述。PS：兄弟你demo中无关的东西去掉，并保持良好的缩进啊 此为前端洁癖 ==b</p>
</body>
</html>
由于没给图片，所以我给每个标签都加上了boder之后发现其实header和content之间并没有间距的。所以你看看是不是你的背景图片的问题呢？