css去除inline-block间隙

先问为什么display:inline-block的元素会存在间隙？ 参考overstackflow上的一个答案

去除方法

1.除空格和换行

    <span>测试</span><span>测试</span><span>测试</span>

也可以更改成这样

    <span>测试</span
                 ><span>测试</span
                  ><span>测试</span>

此方法不靠谱，在不同的浏览器下空格的大小并不统一，无法一次性解决问题

    span{
           display: inline-block;
           margin-right: -4px;
           color: white;
           background-color: black;
       }
     

火狐(Gecko)

360极速(Blink)

Chorme(Blink)

3.使用font-size：0

在父级元素上设置font-size为0，在元素上设置实际需要得font-size即可

div{
    font-size: 0;
}
span{
    display: inline-block;
    font-size: 16px;
}

<div>
    <span>测试</span>
    <span>测试</span>
</div>

4.使用letter-spacing

给父级元素设置一个较大在负值，在元素上将letter-spacing归0。

<div>
    <span>测试</span>
    <span>测试</span>
</div>
div{
   letter-spacing: -20px;
}
span{
    display: inline-block;
    letter-spacing: 0;
}