码农公社 210.net.cn 210是何含义？10月24日是程序员节，1024 = 210、210既 210 之意。
在制作页面的时候，div之间有空隙导致两个本来应该在一起的效果出不来，本文来分享一下解决方法。
1、当 div块与块不能紧密连接 怎么都解决不了时，可以在<head></head>中间内容里加以下代码。
* { margin:0; padding:0; }
该办法使所有块与块之间的间距为零 还不与下面的 padding margin 冲突。
2、上下div之间有间距的问题，4个div,上下分布,均存在间距,代码以及效果如下。
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}
<body>
<div class="div1" ></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
分析之后，尝试在每个div中加margin:0来去掉div之间的间距,代码如下:
.div1{
height:100px;
background-color:blue;
position:relative;
margin: 0;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
margin: 0;
}
.div3{
height:100px;
background-color:red;
position:relative;
margin: 0;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
margin: 0;
}然而，涛声依旧,依然有间隙！
去百度找到一个方法,设置font-size,如下代码以及效果:
body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}上面代码添加了body{font-size:0;},效果如下:
可以看到div上下之间的间隙消除了.然而,最上面和最左面依然有间隙. .
对此,我是这么做的,添加了body{margin:0px;},代码如下:
body{margin:0px;}
body{font-size:0;}
.div1{
height:100px;
background-color:blue;
position:relative;
}
.div2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.div3{
height:100px;
background-color:red;
position:relative;
}
.div4{
height:100px;
background-color:yellow;
position:relative;
}效果如下:
可以看到,间距全部消除了.
然而,还存在一个问题,由于设置了font-size:0;.导致所有的字体消失.
对此,在div中在添加div,重新设置内div的字体大小,比如:font-size:30px;.
完美解决!
3、DIV+CSS clear:both清除浮动后，在div上方产生空隙的问题
我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清除浮动，用clear样式属性即可实现。
但是，在使用了clear:both清除产生的浮动后，往往会在这个应用了clear:both的div的上方出现一个白色空隙。
解决办法是在这个div的上方的div加上overflow:hidden;
<div class="a hid"> <div class="bms_2_1_1 fl">~漂洋过海来看你，</div> <div class="bms_2_1_2 fl"><img src="__STATIC__/images/male.png" width="18" height="18"/></div> </div> <div class="b cle hid">北京</div>
样式说明：
.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}
这是解决clear:both所产生div空隙的办法。
为什么要在div中使用clear:both？
主要是因为div b中的文字即使在css中设置了text-align:left; 文字也无法居左，所以这种情况下使用了clear:both。