div与div之间有空隙的解决⽅法当你使⽤HTML div块与块的中间不能紧密连接怎么都解决不了时positionrelative啥意思
1、可以在<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。
⼏个问题：
（1）为什么div中⽂字的text-align:left;⽆效？
（2）为什么text-align:left;⽆效的情况下，使⽤clear:both可以解决？
（3）为什么使⽤clear:both会产⽣空隙？
（4）为什么在上⽅的同级div中，使⽤overflow:hidden；会解决下⽅出现的空隙问题？
以上这些问题，以后有机会再具体研究⼀下吧。
总结：
当div应⽤clear:both 产⽣空隙后，需要在其上⽅的同级div加上overflow:hidden;，即可消除空隙。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。