div与div之间有空隙的解决方法

网页制作 2024/12/22 佚名

3 1 2

清风细雨楼 Design By www.eepep.com

当你使用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;，即可消除空隙。

div,空隙

清风细雨楼 Design By www.eepep.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

清风细雨楼 Design By www.eepep.com

评论“div与div之间有空隙的解决方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

div与div之间有空隙的解决方法

网页简单布局之结构与表现原则分享

rgba中的a是什么意思 CSS之RGBA颜色指南

评论“div与div之间有空隙的解决方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接