去除inline-block元素间间距的N种方法

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距

1.移除空格(个人推荐)

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

2.使用margin负值 这个方法不适合大规模使用。

.space a { display: inline-block; margin-right: -3px;} 3.让闭合标签吃胶囊

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

4.使用font-size:0

.space { font-size: 0; } .space a { font-size: 12px;}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加： 类似下面的代码：

.space { font-size: 0; -webkit-text-size-adjust:none; }

5.使用letter-spacing

.space { letter-spacing: -3px; } .space a { letter-spacing: 0; }

该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。

6.使用word-spacing

.space { word-spacing: -6px; } .space a { word-spacing: 0; }

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。