不知道大家有沒有碰到過設定了display:inline-block;的幾個相鄰元素之間有幾px間距的問題，這裡提供幾種簡單實用的解決方法，希望能夠幫到大家！
方法1. 將標籤之間的空格與換行全部去掉，這也是我比較常用的一種方法
原html**：
<css**：ul>
<
li>控球後衛
li>
<
li>得分後衛
li>
<
li>小前鋒
li>
<
li>大前鋒
li>
<
li>中鋒
li>
ul>
* body ul ul li ul li:last-child執行效果：
我們發現li的寬度160px乘以5不就等於ul的寬度800px嗎，那為什麼「中鋒」這個li還被擠下來了，難道是小球時代傳統中鋒被集體拋棄的原因嗎？哈哈當然不是，這其實是由於inline-block的特性導致，只要是存在空格或者換行的相鄰inline-block元素，顯示出來就會有幾個px的間距。那我們對html結構作以修改：
<改成這樣之後我們發現中鋒又回去了：ul>
<
li>控球後衛
li><
li>得分後衛
li><
li>小前鋒
li><
li>大前鋒
li><
li>中鋒
li>
ul>
但是將他們都放在一行的這種做法非常影響**的可讀性，我們可以將它改成這樣：
<也就是在相鄰的元素之間加上空白的html注釋，變相地取消了他們之間的空白節點。還有其他的幾種改法這裡不一一枚舉，大家也可以自由發揮，只要是取消了相鄰元素之間的空白節點就能達到目的。ul>
<
li>控球後衛
li>
<
li>得分後衛
li>
<
li>小前鋒
li>
<
li>大前鋒
li>
<
li>中鋒
li>
ul>
方法2. 去掉結束標籤
如下：
<這樣也能得到理想中的結果，但如果要相容低版本ie，最後乙個列表項的結束標籤還是要加上的。ul>
<
li>
控球後衛
<
li>
得分後衛
<
li>
小前鋒
<
li>
大前鋒
<
li>
中鋒ul
>
方法3. 使用負邊距
改動**如下，其他**不變：
ul li ul li:last-child這樣也能解決問題，其中，margin-right的大小並不是固定的，它和字型大小以及字型都有關係，大家可以查閱張鑫旭老師的一篇部落格（中第六部分的**，也可以在自己的**中進行試驗，直到試出合適的值為止。
去除inline block元素間距
現象 當使用inline block的時候，元素間會出現4px的間距 在chrome裡面 是8px 如下圖 原因 元素間留白間距出現的原因就是標籤段之間的空格 解決方法一 既然間距是因為標籤間的空格造成的，那麼消除空格就可以消除間距，但是這一類方法都不符合常規的 書寫習慣，所以 不推薦春天 夏天秋天...
去除 inline block 元素間距
布局時經常能發現inline元素和inline block元素水平呈現的元素間，會存在著一些意想不到的間距，舉例 inline block測試 測試由於換行和空格分割符的存在，行內元素間將被渲染為乙個小間距了。乙個 測試這樣看著仍舊不太舒服，尤其是專案裡縮排層級深的時候 content webkit...
去除inline block元素間間距
根本原因 inline block元素之間之所以有空白間距是因為空格有字型大小原因。第一種 把 之間的換行空白都去掉。例如 第乙個inline block元素 第二個inline block元素 第二種 把inline block元素用乙個大的div包起來，然後設定其字型大小為0即可，inline ...