腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

div與div之間有空隙的解決方法

發(fā)布時(shí)間：2020-03-13 15:40:11 作者：佚名

我要評(píng)論

今天在制作頁(yè)面的時(shí)候發(fā)現(xiàn)兩個(gè)div之間有空隙導(dǎo)致兩個(gè)本來(lái)應(yīng)該在一起的效果，這里結(jié)合一下解決方法

當(dāng)你使用HTML div塊與塊的中間不能緊密連接怎么都解決不了時(shí)

1、可以在<head></head>中間內(nèi)容里加一個(gè)

* {
margin:0;
padding:0;
}

使所有塊與塊之間的間距為零還不與下面的 padding margin 沖突

2、上下div之間有間距的問(wèn)題

我寫了4個(gè)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>

然后,我嘗試在每個(gè)div中加margin:0來(lái)去掉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;
}

結(jié)果效果不變,依然有間隙,如下圖:

接下來(lái)我進(jìn)行了百度,找到了一個(gè)方法,設(shè)置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;
}

上面代碼重點(diǎn)添加了body{font-size:0;},其效果如下:

可以看到div上下之間的間隙消除了.然而,最上面和最左面依然有間隙.

對(duì)此,我是這么做的,添加了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;
}

效果如下:

可以看到,間距全部消除了.

然而,還存在一個(gè)問(wèn)題,就是由于設(shè)置了font-size:0;.那么會(huì)導(dǎo)致所有的字體消失.

對(duì)此,我是這么解決的:在div中在添加div,重新設(shè)置內(nèi)div的字體大小,比如:font-size:30px;.

完美解決!

3、DIV+CSS clear:both清除產(chǎn)生浮動(dòng)后，會(huì)在div上方產(chǎn)生空隙的問(wèn)題

我們知道有時(shí)使用了css float浮動(dòng)會(huì)產(chǎn)生css浮動(dòng)，這個(gè)時(shí)候就需要清理清除浮動(dòng)，我們就用clear樣式屬性即可實(shí)現(xiàn)。

但是在使用了clear:both清除產(chǎn)生的浮動(dòng)后，往往會(huì)在這個(gè)應(yīng)用了clear:both的div的上方出現(xiàn)一個(gè)白色空隙。

解決辦法是在這個(gè)div的上方的div加上overflow:hidden;

                <div class="a hid">
                    <div class="bms_2_1_1 fl">~漂洋過(guò)海來(lái)看你，</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>

樣式說(shuō)明：

.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}

這是這幾天解決clear:both所產(chǎn)生div空隙的辦法。

為什么要在div中使用clear:both？主要是因?yàn)閐iv b中的文字即使在css中設(shè)置了text-align:left; 文字也無(wú)法居左，所以這種情況下使用了clear:both。

幾個(gè)問(wèn)題：
（1）為什么div中文字的text-align:left;無(wú)效？
（2）為什么text-align:left;無(wú)效的情況下，使用clear:both可以解決？
（3）為什么使用clear:both會(huì)產(chǎn)生空隙？
（4）為什么在上方的同級(jí)div中，使用overflow:hidden;會(huì)解決下方出現(xiàn)的空隙問(wèn)題？

以上這些問(wèn)題，以后有機(jī)會(huì)再具體研究一下吧。

總結(jié)：

當(dāng)div應(yīng)用clear:both 產(chǎn)生空隙后，需要在其上方的同級(jí)div加上overflow:hidden;，即可消除空隙。

Tag：DIV

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

div與div之間有空隙的解決方法

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容