您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)div與div間有空隙如何解決,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1、可以在<head></head>中間內(nèi)容里加一個(gè)
* {
margin:0;
padding:0;
}
使所有塊與塊之間的間距為零 還不與下面的 padding margin 沖突
2、上下div之間有間距的問題
我寫了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來去掉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é)果效果不變,依然有間隙,如下圖:
接下來我進(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è)問題,就是由于設(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)生空隙的問題
我們知道有時(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">~漂洋過海來看你,</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)容,你們對(duì)div與div間有空隙如何解決有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。