极客观点
项目管理
HarmonyOS
最近遇到的问题是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>
给你的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>