有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来 实现元素的居中效果。但是inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。关于这个问题，原来很多人不知道啊。呵呵~其 实很简单，当原素被转换为inline-block显示的时候，那么该元素会具有inline的一些属性，所 以当你在标签之间换行的时候会产生空格，inline-block之间的间距就是一个空格的位置，你要算间隙是几个像素，其实依赖于你的字体设置大小，空 格是个字符啊，所以-margin补间距之类的方法不可取，所以大家每个人出来的负值都不一样（-_-!）。空格是由inline-block标签之间换 行产生的，那么解决方法简单了，不要在转换为inline-block的标签的代码之间换行就行了，开发人员一定要在精确布局的时候要注意一下。 inline-block具有inline的一些属性，那么inline标签代码之间换行本来就会有空格产生 的；IE倒是奇怪没有产生空格，但是也讲的通。

大家首先来看一个DEMO：

我们可以看到：在 ie8、chrome、firefox、opera 以及 safari 浏览器下，li之间有“空白间隙”。
但是在 ie6 和 ie7 浏览器下却正常显示。
解决方法：
第一：去掉html标签中的空格和回车；
例如：

<ul><li>web前端开发</li><li>前端开发</li><li>前端开发:http://www.css119.com</li></ul>

第二：改变html标签的结构(下面只展示出了一种，还有其他的类似方法)；
例如：

<ul>  <li>WEB前端开发</li  ><li>前端开发</li  ><li>前端开发:http://www.css119.com</li></ul>

第三：利用负margin解决（不推荐，具体负margin多少取决于字体的大小）；

第四：设置父元素font-size:0;子元素重新设置自己的font-size；
例如：

ul{font-size:0}li{ display:inline-block;*display:inline;*zoom:1;background:green; padding:5px;font-size:12px}

可以看到在 ie8，firefox，chrome 和 opera 浏览器下已经没有问题了，但是在 低版本safari 浏览器下还是有问题。
关于 低版本safari 浏览器的兼容。
可以利用letter-space:-N px或者word-spacing:-N px来解决。

扩展阅读：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

如何解决inline-block元素的空白间距