圖片來自網(wǎng)絡

inline, inline-block元素之間的換行符會造成類似空格的空白。不知道你遇到過沒？比如以下代碼：

<a>1</a>
<a>2</a>

這種問題對布局影響不大，容易被忽略。但是某些極端情況就會把這個問題放大。例如以下代碼：

<ul>
  <li>Item content</li>
  <li>Item content</li>
  <li>Item content</li>
</ul>
<style>
li{  width:33.3%;  display:inline-block;  background:#abc; }
</style>

這樣一行的結(jié)構(gòu)，精確的分配了行內(nèi)元素的寬度，而換行產(chǎn)生的空白的影響被放大了。如何解決這種問題呢？

1. 選用浮動的block代替inline-block， 因為曾經(jīng)要處理IE6對inline-block的兼容性，養(yǎng)成了不適用inline-block的習慣，所以第一個想到這種方案。
2. 編碼時不使用換行，例如以下代碼：

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

這種方法沒有解決問題，而是規(guī)避了問題。這是最簡單而不會帶來任何影響的方法，但是之后其他人很容易排版你的代碼從而導致問題，明顯這種方法的可維護性太低。

3. 將父級font-size置0，行內(nèi)元素再恢復字體大小。
   這種方式是本人最喜歡的，不是因為它貌似"高大上"，而是因為它揭開了產(chǎn)生問題的原理。
4. 利用注釋進行代碼排版，例如以下代碼：

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

5. 使用返回標簽，類似上一種辦法，代碼如下：

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

6. 利用css 否定邊距，例如以下代碼：

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

這種方法是最差的，因為這很有可能為了解決問題而增加了新問題的風險，同時降低了強壯性和可維護性。
解決方案都經(jīng)過了測試，建議采用第一種和第三種。
</br>

本文通過Segmentfault，參考了文章Remove Whitespace Between Inline-Block Elements.
</br></br></br></br></br></br></br></br></br>