如何消除inline-block產生的元素間空隙

前端初學者可能都會碰到這個問題：有時候排版須要，會把一些塊狀元素的display屬性設置爲inline-block，如

<!-- HTML代碼 -->
<div class="parent">
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
</div>

/* css代碼 */
.child {display:inline-block;background-color:#ccc;}

瀏覽器中顯示的結果：

雖然四個塊狀子元素排在了一行，可是子元素之間卻留有空隙！

空隙產生緣由：HTML中的換行符、空格符、製表符等空白符，字體大小不爲0的狀況下，空白符佔據必定寬度，使用inline-block會產生元素間的空隙。

解決方法 ：
1. 父元素的font-size設置爲0，子元素的font-size設置爲實際大小；
2. 子元素設置浮動；
3. 把全部的子元素寫在一行；
4. 有時候子元素內容較長，全部子元素寫在一行致使代碼的可讀性不好，這時候採用下面的寫法（用HTML註釋符把子元素鏈接起來）：

<div class="parent"> 
　　　 <div class="child"></div><!--
　　--><div class="child"></div><!--
　　--><div class="child"></div><!--
　　--><div class="child"></div>
</div>

5. 父元素word-spacing設置負值（具體設爲多少，我測試的結果顯示：不一樣瀏覽器還不徹底一致，暫不推薦此種方法）。

------------------------------------------------------------------------------------------------

參考評論，2015.10.30從新編輯