間距就來了~~
我們使用CSS更改非inline-block水平元素為inline-block水平，也會有該問題：
<div class="space"> <a href="##">惆悵</a> <a href="##">淡定</a> <a href="##">熱血</a> </div>
您可以狠狠地點(diǎn)擊這里：inline-block元素間間距demo
這種表現(xiàn)是符合規(guī)范的應(yīng)該有的表現(xiàn)（如果有人認(rèn)為是bug就太()ay ()oy 了）。
不過，這類間距有時會對我們布局，或是兼容性處理產(chǎn)生影響，需要去掉它，該怎么辦呢？以下展示N種方法（歡迎補(bǔ)充）！
二、方法之移除空格元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了?？紤]到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：
或者是：
或者是借助HTML注釋：
等。
三、使用margin負(fù)值
margin負(fù)值的大小與上下文的字體和文字大小相關(guān)，其中，間距對應(yīng)大小值可以參見我之前“基于display:inline-block的列表布局”一文part 6的統(tǒng)計表格：
例如，對于12像素大小的上下文，Arial字體的margin負(fù)值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。
由于外部環(huán)境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規(guī)模使用。
四、讓閉合標(biāo)簽吃膠囊如下處理：
注意，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標(biāo)簽的結(jié)束（閉合）標(biāo)簽不能丟。
在HTML5中，我們直接：
好吧，雖然感覺上有點(diǎn)怪怪的，但是，這是OK的。
您可以狠狠地點(diǎn)擊這里：無閉合標(biāo)簽去除inline-block元素間距demo
五、使用font-size:0類似下面的代碼：
這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器，就是Chrome, 其默認(rèn)有最小字體大小限制，因?yàn)?，考慮到兼容性，我們還需要添加：
類似下面的代碼：
您可以狠狠地點(diǎn)擊這里（去年制作的一個簡單demo）：font-size:0清除換行符間隙demo
補(bǔ)充：根據(jù)小杜在評論中中的說法，目前Chrome瀏覽器已經(jīng)取消了最小字體限制。因此，上面的-webkit-text-size-adjust:none;代碼估計時日不多了。
六、使用letter-spacing類似下面的代碼：
letter-spacing再小就還原了。letter-spacing)一個是單詞間距(word-spacing)，大同小異。據(jù)我測試，word-spacing的負(fù)值只要大到一定程度，其兼容性上的差異就可以被忽略。因?yàn)?，貌似?code>word-spacing即使負(fù)值很大，也不會發(fā)生重疊。display: table;或display:inline-table;讓Chrome瀏覽器也變得乖巧。八、其他成品方法下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格柵單元見間隔方法（注意，其針對的是block水平的元素，因此對IE8-瀏覽器做了hack處理）：
以下是一個名叫RayM的人提供的方法：
也就是上面一系列CSS方法的組組合合。
九、結(jié)語其他去除間距的方法肯定還有，歡迎大家通過評論方式進(jìn)行補(bǔ)充。上文部分方法可能有測試不周全之處，因此，部分細(xì)節(jié)上可能會有紕漏，歡迎指正。
參考文章：Fighting the Space Between Inline Block Elements
新聞熱點(diǎn)
疑難解答
圖片精選
