How to eliminate the gaps between two sibling div

89 5


The most recently encountered problem is that the div has a background, a vertical aligned sibling div. Margin: 0, padding: 0 doesn't seem to be removed, while margin bottom: -x px; yes, but do you think it's a bit easier, there's another way to do it. What's the root cause of this situation. ps: compare dishes

#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>
 &#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>
3 Answers

69 5
134 0
...