两个同级div中间的空隙如何消除_问答-阿里云开发者社区

screenshot
最近遇到的问题是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>
                &#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>

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>

两个同级div中间的空隙如何消除

相关文章

相关电子书