div与div间有空隙如何解决-创新互联
今天就跟大家聊聊有关div与div间有空隙如何解决,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联建站是专业的大庆网站建设公司,大庆接单;提供网站制作、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行大庆网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!1、可以在
中间内容里加一个* {
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; }
然后,我尝试在每个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;
~漂洋过海来看你,
北京
样式说明:
.cle{clear:both;}
.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}
看完上述内容,你们对div与div间有空隙如何解决有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
当前标题:div与div间有空隙如何解决-创新互联
标题来源:http://pwwzsj.com/article/ccohgh.html