今天在制作页面的时候发现两个p之间有空隙导致两个本来应该在一起的效果，这里结合一下解决方法。
当你使用HTML p块与块的中间不能紧密连接 怎么都解决不了时1、可以在中间内容里加一个* {margin:0;padding:0;}2、上下p之间有间距的问题我写了4个p,上下分布,均存在间距,代码以及效果如下:.p1{height:100px;
background-color:blue;
position:relative;
}
.p2 {
height:100px;
background-color:blueviolet;
position:relative;
}
.p3{
height:100px;
background-color:red;
position:relative;
}
.p4{
height:100px;
background-color:yellow;
position:relative;
}
然后,我尝试在每个p中加margin:0来去掉p之间的间距,代码如下:.p1{height:100px;background-color:blue;position:relative;margin: 0;}.p2 {height:100px;background-color:blueviolet;position:relative;margin: 0;}.p3{height:100px;background-color:red;position:relative;margin: 0;}.p4{height:100px;background-color:yellow;position:relative;margin: 0;}结果效果不变,依然有间隙,如下图:接下来我进行了百度,找到了一个方法,设置font-size,如下代码以及效果:body{font-size:0;}.p1{height:100px;background-color:blue;position:relative;}.p2 {height:100px;background-color:blueviolet;position:relative;}.p3{height:100px;background-color:red;position:relative;}.p4{height:100px;background-color:yellow;position:relative;}上面代码重点添加了body{font-size:0;},其效果如下:可以看到p上下之间的间隙消除了.然而,最上面和最左面依然有间隙.对此,我是这么做的,添加了body{margin:0px;},代码如下:body{margin:0px;}body{font-size:0;}.p1{height:100px;background-color:blue;position:relative;}.p2 {height:100px;background-color:blueviolet;position:relative;}.p3{height:100px;background-color:red;position:relative;}.p4{height:100px;background-color:yellow;position:relative;}效果如下:可以看到,间距全部消除了.然而,还存在一个问题,就是由于设置了font-size:0;.那么会导致所有的字体消失.对此,我是这么解决的:在p中在添加p,重新设置内p的字体大小,比如:font-size:30px;.完美解决!3、DIV+CSS clear:both清除产生浮动后，会在p上方产生空隙的问题我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。但是在使用了clear:both清除产生的浮动后，往往会在这个应用了clear:both的p的上方出现一个白色空隙。解决办法是在这个p的上方的p加上overflow:hidden;
~漂洋过海来看你，
北京
样式说明：
.cle{clear:both;}.hid{overflow:hidden;}
.fl{ float:left;}
.fr{ float:right;}这是这几天解决clear:both所产生p空隙的办法。为什么要在p中使用clear:both?主要是因为p b中的文字即使在css中设置了text-align:left; 文字也无法居左，所以这种情况下使用了clear:both。几个问题：(1)为什么p中文字的text-align:left;无效?(2)为什么text-align:left;无效的情况下，使用clear:both可以解决?(3)为什么使用clear:both会产生空隙?(4)为什么在上方的同级p中，使用overflow:hidden;会解决下方出现的空隙问题?以上这些问题，以后有机会再具体研究一下吧。总结：当p应用clear:both 产生空隙后，需要在其上方的同级p加上overflow:hidden;，即可消除空隙。
