真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

div與div間有空隙如何解決

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

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

1、可以在中間內(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;
}

div與div間有空隙如何解決

然后,我嘗試在每個(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é)果效果不變,依然有間隙,如下圖:

div與div間有空隙如何解決

接下來我進(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與div間有空隙如何解決

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