如何消除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重新編輯