去除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