去除inline block元素間間距的N種方法

一、現象描述

真正意義上的inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子：

我們使用css更改非inline-block水平元素為inline-block水平，也會有該問題：

.space a

惆悵

淡定熱血
您可以狠狠地點選這裡：inline-block元素間間距demo
這種表現是符合規範的應該有的表現（如果有人認為是bug就太()ay ()oy 了）。
不過，這類間距有時會對我們布局，或是相容性處理產生影響，需要去掉它，該怎麼辦呢？以下展示n種方法（歡迎補充）！
元素間留白間距出現的原因就是標籤段之間的空格，因此，去掉html中的空格，自然間距就木有了。考慮到**可讀性，顯然連成一行的寫法是不可取的，我們可以：
惆悵

淡定熱血
或者是：

惆悵淡定熱血

或者是借助html注釋：

惆悵

淡定熱血
等。

.space a
margin負值的大小與上下文的字型和文字大小相關，其中，間距對應大小值可以參見我之前「基於display:inline-block的列表布局」一文part

6的統計**：
例如，對於12畫素大小的上下文，arial字型的margin負值為-3畫素，tahoma和verdana就是-4畫素，而geneva為-6畫素。
由於外部環境的不確定性，以及最後乙個元素多出的父margin值等問題，這個方法不適合大規模使用。
如下處理：
惆悵

淡定熱血
注意，為了向下相容ie6/ie7等喝蒙牛長大的瀏覽器，最後乙個列表的標籤的結束（閉合）標籤不能丟。

在html5中，我們直接：
惆悵

淡定熱血
好吧，雖然感覺上有點怪怪的，但是，這是ok的。

您可以狠狠地點選這裡：無閉合標籤去除inline-block元素間距demo
類似下面的**：
.space 

.space a 
這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(ie7等瀏覽器有時候會有1畫素的間距)。不過有個瀏覽器，就是chrome, 其預設有最小字型大小限制，因為，考慮到相容性，我們還需要新增：

類似下面的**：
.space
您可以狠狠地點選這裡（去年製作的乙個簡單demo）：font-size:0清除換行符間隙demo

類似下面的**：
.space 

.space a 
根據我去年的測試，該方法可以搞定基本上所有瀏覽器，包括吃「東鞋」、「西毒(膠囊)」、「南地(溝油)」、「北鈣(三鹿)」的ie6/ie7瀏覽器，不過opera瀏覽器下有蛋疼的問題：最小間距1畫素，然後，letter-spacing再小就還原了。

類似下面**：
.space 

.space a 
乙個是字元間距(letter-spacing)乙個是單詞間距(word-spacing)，大同小異。據我測試，word-spacing的負值只要大到一定程度，其相容性上的差異就可以被忽略。因為，貌似，word-spacing即使負值很大，也不會發生重疊。

您可以狠狠地點選這裡：word-spacing與元素間距去除demo
與上面demo一樣的效果，這裡就不截圖展示了。如果您使用chrome瀏覽器，可能看到的是間距依舊存在。確實是有該問題，原因我是不清楚，不過我知道，可以新增display: table;或display:inline-table;讓chrome瀏覽器也變得乖巧。
.space
下面展示的是yui 3 css grids 使用letter-spacing和word-spacing去除格柵單元見間隔方法（注意，其針對的是block水平的元素，因此對ie8-瀏覽器做了hack處理）：

.yui3-g 

.yui3-u 
以下是乙個名叫raym的人提供的方法：

li 

ul .n** li 
也就是上面一系列css方法的組組合合。

參考文章：fighting the space between inline block elements
 
去除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 ...