关于inline-block的间隙问题

很久之前写过一个星星评级的样式，当时开发人员在嵌套代码的时候出现很多问题，同样的一个样式有的页面正常有的页面就出现星星错位的问题，仔细研究了一下代码，发现问题原来出在了inline-block上。

 

目标样式：评级星星

实现手段：<span class="star"><span class='star1'></span></span>

相应样式：.star给一个灰色星星背景，display:inline-block使其支持宽高；
.star1给一个黄色星星背景，用width百分比来控制星星的个数，给一个display:inline-block使其支持宽高；

出现的问题：内部黄色的星星有向下错位现象，和外部span顶部大约有5px的上边距；

解决方案：最初是使用相对定位将内部黄色的星星相上top:-5px;这个问题时好时坏，有的时候没事，有的时候有事，初步分析和浏览器有关。

 

无意中将display:inline-block改成了display:block;发现问题解决了，两种颜色的星星完全重合，也不需要将黄色星星进行定位了。

 

总结：inline-block在使用的过程中会有间隙，不在特殊情况下尽量不用，需要inline就直接inline，需要block就直接block。

如果确实需要使用inline-block,那么去除间隙的方式有以下几种：
一：去除标签之间的空格和回车；
二：使用负边距；
三：给父级元素设置font-size:0,子集根据实际情况使用font-size。

本人比较常使用的方法是第三个，有的时候空格和回车是难免的，而且完全没有空格和回车的代码也比较难于看懂，至于第二个方法，只是不喜欢用。

另外，对于inline-block的间隙问题，有的时候其实是可以加以利用的，比如说有的分页需要一些小空隙，那就刚好可以使用这个方式。