開發中可能會遇到：一連串的inline-block元素在格式化HTML 之後會出現間隔。
舉個栗子：
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
複製程式碼nav a {
display: inline-block;
padding: 5px;
background: red;
}
複製程式碼將在頁面上顯示：
往往我們需要的是每個元素拼接連在一起。像導航欄這種，我們就要避免不能點選的空格出現。
這不是一個bug（我不認為是）。它僅僅是讓元素在一條線上如何顯示的習慣。正確的書寫不就是單詞之間應該有空格的嗎？而inline-block元素之間的空格就像兩個單詞之間的空格。這也不是說規範不能更新，關於取消兩個inline-block元素之間的空格，但我確定這幾乎是不可能發生的事。
下面是一些能避免空格讓元素緊連在一起顯示的方法：
移除空格
之所以顯示時看到空格是因為本來就有空格在兩個元素之間（換行和一些tabs都會視為空格，它們僅僅是讓結構更加清晰）。從HTML結構入手可以解決這問題，下面是一些處理的技巧：
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
複製程式碼或者，
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
複製程式碼又或者添是加註釋的方式，
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
複製程式碼設定margin值為負值
可以通過設定負值的margin讓元素回退將空格位置佔滿（具體數值需要根據父元素的字型大小來調整）。不過這種方式在比較老的IE瀏覽器（6 & 7）中會有些問題，如果你不需要考慮那些瀏覽器，就可以用這種方法避免顯示的空格，又能保持清晰的HTML結構。
nav a {
display: inline-block;
margin-right: -4px;
}
複製程式碼跳過閉合標籤
在HTML5 下跳過閉合標籤依然能正常工作。雖然可以這麼做，但還是覺得奇怪。
<ul>
<li>one
<li>two
<li>three
</ul>
複製程式碼設定font size的值為零
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
複製程式碼Matt Stow 研究font-size: 0;發現：這種做法在安卓中會出現一些問題。“Jellybean之前的版本並沒有移除間隔, Jellybean版本有一個bug，就是有時最後一個元素有一個比較小的間隔。”
另外需要注意，如果字型使用的單位是em，被設定font size值為零的元素也會預設將它級聯的子元素的字型大小設定為零。不過使用rem就可以避免這個問題，除此之外就是使用其他非級聯font-size。
還有另外怪異的地方！Doug Stewart告訴我，如果使用了@font-face並且使用了該方法，在afari 5.0.x字型將失去anti-aliasing屬性。（測試栗子）（效果圖）
使用浮動代替
也許並不需要讓元素inline-block化，也許可以通過設定浮動讓它們一個接一個。這允許你為它們設定它們的width、height、padding。但是不能像父元素是inline-block那樣通過設定text-align: center;讓它們居中。
使用flexbox代替
如果瀏覽器支援flexbox，並且你需要使````inline-block```元素居中，可以使用flexbox。它們雖然不是完全可互換的佈局模型，但是你可能會得到你需要的效果。