css去除inline-block間隙

先問爲何display:inline-block的元素會存在間隙？ 參考overstackflow上的一個答案

This is exactly what they should do.Spaces between inline elements are no different from spaces between words.If you don't want that, use block elements, or set the font size to zero.

去除方法

1.除空格和換行

<span>測試</span><span>測試</span><span>測試</span>

也能夠更改爲這樣

<span>測試</span
                 ><span>測試</span
                  ><span>測試</span>

2.使用margin-right設置負邊距

此方法不靠譜，在不一樣的瀏覽器下空格的大小並不統一，沒法一次性解決問題

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;
}