今天在制作页面的时候发现两个div之间有空隙导致两个本来应该在一起的效果,这里结合一下解决方法

当你使用HTML div块与块的中间不能紧密连接 怎么都解决不了时

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;,即可消除空隙。

最新资讯
微信遭美国封杀:腾讯系大跌 腾讯控股市值蒸发2684亿

微信遭美国封杀:腾讯系

腾讯系集体暴跌,微盟集团跌5.8%,中国有赞跌5.65%,腾讯控
余承东:消费者业务上半年收入2558亿元 手机发货量1.05亿台

余承东:消费者业务上半

在今日的中国信息化百人会2020年峰会上,华为消费者业务
腾讯控股收盘跌5.76% 此前特朗普签署TikTok微信禁令

腾讯控股收盘跌5.76%

港股收盘,科技股方面, 腾讯控股跌5.76%,阿里巴巴跌3.35%,
特朗普发布对微信禁令 腾讯回应:正在评估该行政命令

特朗普发布对微信禁令

在特朗普下令45天后禁止与微信进行交易后,腾讯公司发言
外交部回应特朗普签署TikTok微信禁令:美方最终将自食其果!

外交部回应特朗普签署

汪文斌表示,得道多助,失道寡助,美方将一己私利凌驾于市场
特朗普签署行政令限制微信、TikTok等软件 外交部回应

特朗普签署行政令限制

汪文斌表示,有关的企业按照市场原则和国际规则,在美开展
最新文章
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

这篇文章主要介绍了白话分析自适应跟响应式的区别详解
div与div之间有空隙的解决方法

div与div之间有空隙的

今天在制作页面的时候发现两个div之间有空隙导致两个
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合