兩個 inline-block 元素之間會有間隙（事實上，除了 inline-block 元素，兩個 inline 元素之間也是有間隙的），究其根本，其實就是 html 元素換行導致（可以嘗試下，換行和元素之間加個空格，或者多個空格，結果一樣，最後都是一個空格）。如何清除這個間隙呢？

方法 0 - 移除空格

我們知道，產生間隙的原因，是因為元素之間有空格（換行，tabs，多個空格等，最後的表現都是一個空格），那麽理論上，去掉這個空格，就不會有間隙了。

如果 html 是在後端模板中，那麽有些模板可能就自帶了去除 html 元素間隙的功能，比如 PHP 模板 twig，自帶 spaceless 標簽，而一些 html minimize 的工具，也會去除 html 之間的空格

如果不符合上述情況，也沒有關系，我們手動去除：

<!-- 方法一 -->
<div>
one</div><div>
two</div><div>
three</div>

<!-- 方法二 -->
<div>one</div
><div>two</div
><div>three</div>

<!-- 方法三 -->
<div>one</div><!--
--><div>two</div><!--
--><div>three</div>
 

雖然生效了，但是不太優雅，如果有多個標簽，這麽寫 html 太累了（當然，如果 html 是模版生成的，一般會有循環方法，也還好，推薦第三種 comments 方法，可讀性相對強點）

方法二 - 負值 margin

想象一下，兩個元素之間有間隙，給元素加上負值的 margin，是不是就能消除間隙了？答案是肯定的，但是這個負值，到底是多少，有待商榷，因為這個間隙，和 inline-block 父元素的 font-size 大小有關，跟頁面所用字體有關，可能還跟瀏覽器有關（這點我並未探索）

nav a {
  display: inline-block;
  margin-right: -4px;
}
 

所以這個方法並不好

方法三 - 父元素 font-size 設置為 0

父元素設置 font-size 為 0，然後子元素（即 inline-block）的元素再單獨設置 font-size

據說安卓機器可能會有問題，可以看下最下面的前兩個鏈接中的此法說明

方法四 - 改用 float 布局

方法五 - 改用 flex 布局

方法六 - white-space-collapsing:discard

css3 草案 white-space-collapsing:discard，詳見 這裏，截至目前（2018/10/21），還並未有瀏覽器實現

參考：

• Fighting the Space Between Inline Block Elements
• Remove Whitespace Between Inline-Block Elements
• How do I remove the space between inline-block elements?

inline-block 元素之間間隙清除的幾種方法