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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

两个同级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>

展开
收起
a123456678 2016-03-24 15:18:58 2819 0
1 条回答
写回答
取消 提交回答
  • 给你的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>
    2019-07-17 19:12:48
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载