在利用CSS布局时,经常会遇到一些没有定义间距padding、margin之类的内容,但是页面上却总会有一些不知从何而来的间距出现,下面就是我在自己的工作中遇到的一些常见情况的总结,及其消除方法。
1.并排div之间的间距。
多个div元素在定义属性:display:inline-block;后,多个div元素之间并排排列,但是它们之间总是隔着那么几像素的距离,即便你一次又一次修改自己的padding、margin设置为0,都没办法取消。
它们之间存在的间距,是因为不同div之间存在默认间距,因为写代码的习惯,一个div元素结束之后,我们总会换行开始写代码,这一换行就是div之间存在间距的原因。
所以解决办法很简单,a.去掉代码上不同div元素之间的换行或者空格即可,这个方法在代码可读性上有些不可取。如果你对代码格式有很严格的限制,像我一样是个无可救药的强迫症,你就选择下面的方法吧。b.利用注释将div之间的空格标记起来。c.网上还有人提到过一种解决方案,将margin设置为负值,这个方法也是可行的,但是由于浏览器之间的标准差异,margin的设置可能会需要在不同浏览器中设置为不同的值,增加了工作的复杂度。
<div class="color-choice">
<p>this is div 1.</p>
</div><!--
--><divclass="color-choice">
<p>this is div 1.</p>
</div><!--
--><divclass="color-choice">
<p>this is div 1.</p>
</div>
2.块级元素与浏览器之间的间距。
在一个简单的页面中,定义一个div元素,想要让它的背景为黑色,width:100%,但是,发现元素与页面之间总存在一点间隔。如图所示:
看着特别均匀的感觉,利用chrome开发者工具查看其样式,可以发现
这是浏览器默认的样式,所以,这个的解决方法很简单,重新写一个新的样式,margin:0px;覆盖现有的样式即可。最终效果:
3.p元素与相邻元素前后都有1em的间距。
我遇到这个问题是在2.中定义一个页面的header的时候遇到的。2.的问题解决后,左右与浏览器边框之间的间距没有了,但是上下之间还存在更大的间距。如下图所示:
最开始以为还是div的原因,所以纠结了许久,后来,同样利用神奇的chrome开发者工具,一个元素一个元素地看,发现了<p>Tap here.Choose your own style!</p>的样式如下:
因为前后都有1em的间距,发现问题了,解决办法就随之出来了,同样新写样式,覆盖已有的即可。
p{
display: block;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
最终效果:
总结,许多的块级元素都存在一些自有的间距定义,padding或者margin,遇到这些不知从何而来的间距时记得先看看它们的自带属性。