css：纵向排列的div中间有间隙的问题

最新推荐文章于 2020-11-27 00:10:15 发布

weixin_30597269

最新推荐文章于 2020-11-27 00:10:15 发布

阅读量426

点赞数 1

文章标签： xhtml

原文链接：http://www.cnblogs.com/dont27/archive/2011/10/30/2229253.html

版权

刚才修改页面div整合时，发现附加图片背景后，明显上下两个div之间有间隙出现，于是低效率又来了……改margin-bottom为0与margin-top为0都不行，囧死……

后来网上搜搜，看了许久，才看到亮点……就是margin改为负值……于是乎，试了一下，真的可以：将上面的div css修改margin-bottom=-18px，然后就把两个div在外观上真实拼接了，

可是随后又出现其他问题，即可能出现使用同一款css，在上一个div底部有内容的情况下，会导致该内容覆盖到下一个div的顶部空间处，一旦两者都有内容，就会重叠……

于是乎，我的做法是在下一个div顶部加若干个<br>……

为啥两个div之间会有间隙呢？

附上代码：

css：

#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 Demo：（实际问题在demo源码中）

<!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>

之前一直纠结着在div的margin为0却失败的问题，

在http://segmentfault.com/question/639/%E4%B8%A4%E4%B8%AA%E5%90%8C%E7%BA%A7div%E4%B8%AD%E9%97%B4%E7%9A%84%E7%A9%BA%E9%9A%99%E5%A6%82%E4%BD%95%E6%B6%88%E9%99%A4?answer=1405#top
上提问，给力的朋友点出了重点：

浏览器默认样式中，h1等标题元素默认拥有一定的margin值，#header和#contentBack之间的空隙，便是由#content中的h1引起的，在chrome中，用审查工具，一看便知！

转载于:https://www.cnblogs.com/dont27/archive/2011/10/30/2229253.html

weixin_30597269

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css：纵向排列的div中间有间隙的问题

刚才修改页面div整合时，发现附加图片背景后，明显上下两个div之间有间隙出现，于是低效率又来了……改margin-bottom为0与margin-top为0都不行，囧死……后来网上搜搜，看了许久，才看到亮点……就是margin改为负值……于是乎，试了一下，真的可以：将上面的div css修改margin-bottom=-18px，然后就把两个div在外观上真实拼接了，可是随后又出现其他问...
复制链接

扫一扫