display: inline-block 是個很好用的樣式，當你需要多個塊狀元素在同一行時你的第一反應就是它。有了它，你不在需要讓這些元素去“block”和“float”，然後再去處理由於“float”引起的佈局問題。但有一個問題，當使用inline-block時，HTML元素之間的空白會顯示在頁面上，這讓我們控制樣式的時候很難處理，下面我就介紹5個方法來幹掉他。

方法1：各元素間不留任何空白

一個100%能解決這個問題的方法是在你的HTML程式碼裡元素間不留任何空白：

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

當然，這樣看起來很亂，讓程式碼不好維護，但很實用，很直觀，更重要的……很可靠。

這裡提一下，我們在手寫HTML的時候新增換行以及縮排是為了讓它們看起來更清晰，當後臺的小夥伴們通過動態模板輸出的時候，它們是就是上面那個鬼樣子，這就是為什麼有些時候真實的專案中和我們自己的靜態檔案效果有出入的原因。

方法2：在父元素上設定font-size: 0

解決這個空白問題最好的方案是在這些inline-block元素的父元素上設定font-size: 0。如果你的<UL>裡有inline-block的<LI>，那你可以這樣做：

.inline-block-list { 
    font-size: 0; /* ul or ol with this class */
}

.inline-block-list li {
    font-size: 14px;  /* put the font-size back */
}

為了不讓父元素的字型大小影響子元素，你需要重新在子元素上設定font-size值，這通常很簡單。唯一可能遇到麻煩的情況是你用相對大小設定字型。但大多數時候，這樣的方法能解決你的問題，如何你的子元素內沒有任何文字，那麼這種方法更是你的上上之選。

方法3：負邊距

.inline-block-list li {
    margin-left: -4px;
}

這種方法最不推薦，因為你必須考慮到各種情況，有時候會出現一些無法預料的空白或覆蓋。這裡只是單純的陳述一種解決方案，最好不用這招。

方法4：首尾接龍

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

方法5：HTML註釋

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

後面這2種方法原理其實和第一種方法類似，本人尊重原作者，就一併引用過來了，這裡就不再做討論了。

總結

基於第一種方法，如果元素是動態的資料，那麼我們可以完全無視該影響，當然我們自己在除錯靜態HTML的時候看起來會彆扭一些；若是非靜態的資料推薦使用第二種方法。

來源：https://www.cnblogs.com/dpure/p/4610511.html