去除inline-block的间隙

 产生间隙的缘由就是标签之间的空格，去除的方法：

1 设置父元素的font-size：0;空格字符的宽高都为0,

<div class="demo1 demo2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

 

2 inline-block元素在一行上，不换行

<div class="demo1">
    <span></span><span></span><span></span><span></span>
</div>

3 inline-block元素换行，可是上一个标签的结束标签与下一个标签的开始标签在一行上

<div class="demo1">
    <span></span><span>
    </span><span>
    </span><span>
    </span>
</div>

或者

<div class="demo1">
    <span></span
    ><span></span
    ><span></span
    ><span></span>
</div>

4 在上一个标签的结束标签和下一个标签的结束标签之间加上注释，消除空格的影响

<div class="demo1">
    <span></span><!--
    --><span></span><!--
    --><span></span><!--
    --><span></span>
</div>

5 设置margin负值：margin负值的大小与上下文的字体和文字大小相关

或者设置letter-spacing 或者word-spacing