去除inline-block元素之间的间隙

如果想要块元素在一行显示，一种是把每个块元素浮动起来，但是这样的话有可能会影响布局，还有一种常用的方法是把块元素设置为行内块元素，即使用display:inline-block。但是这个时候，我们会发现，两个元素之间会有一个4px的间距，那么如何去除这个间距呢？结合前辈的经验，总结以下方法。

1.把每个元素浮动起来，float:left

2.改变html结构，把第一行的结束标签放在第二行，如

<li>1</li

><li>2

3.利用html注释，如

<li>1</li><!--

--><li></li2>

4.利用margin-right负值，即margin-right:-4px;然而在chrome中还需要设定另外一个值。

5.给父元素设置font-size:0,然后给子元素设置font-size。然而chrome中：-webkit-text-size-adjust:none;

6.使用display:table和word-spacing，即

.box{display:table;word-spacing:-1em;}

7.使用letter-spacing，使用了letter-spacing相对单位em表示距离，所以不需要根据字体大小改变代码来去除元素间距。

.box{letter-spacing:-0.5em;}

.box div{letter-spacing:0;}

8.使用word-spacing.

.box{word-spacing:-0.5em}

9.一个可以兼容IE的方案

.box{font-size:0;*word-spacing:-1px;}

.box span{font-size:14px;display:inline-block;*display:inline;*zoom:1;word-spacing:normal;}