div與div間有空隙如何解決

今天就跟大家聊聊有關(guān)div與div間有空隙如何解決，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計,固安網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:固安等地區(qū)。固安做網(wǎng)站價格咨詢:028-86922220

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

* {
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與div間有空隙如何解決

然后,我嘗試在每個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;
}

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

div與div間有空隙如何解決

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

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

div與div間有空隙如何解決

可以看到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;
}

效果如下:

div與div間有空隙如何解決

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

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

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

完美解決!

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

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

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

解決辦法是在這個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;}

看完上述內(nèi)容，你們對div與div間有空隙如何解決有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

標(biāo)題名稱：div與div間有空隙如何解決
網(wǎng)站URL：http://aaarwkj.com/article38/peegsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站導(dǎo)航、網(wǎng)站排名、網(wǎng)站設(shè)計、虛擬主機(jī)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

div與div間有空隙如何解決