去掉inline-block元素默认间距的几种方法

方法1：使用负margin值
一般是-3px，部分浏览器可能不同，不太推荐使用。

方法2：去掉多余空格
将元素紧挨着写去掉多余空格，但降低了可读性。

方法3：使用font-size:0
在外层父元素加上font-size:0,内层再设置font-size覆盖。在谷歌浏览器上可能需要hack使其支持小字体。

方法4：使用负值的word-spacing或letter-spacing，用的不多

网上实例：

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {

    letter-spacing: -0.31em; /* webkit */

    *letter-spacing: normal; /* IE < 8 重置 */

    word-spacing: -0.43em; /* IE < 8 && gecko */

}



.yui3-u {

    display: inline-block;

    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */

    letter-spacing: normal;

    word-spacing: normal;

    vertical-align: top;

}

以下是一个名叫RayM的人提供的方法：

li {

    display:inline-block;

    background: orange;

    padding:10px;

    word-spacing:0;

    }

ul {

    width:100%;

    display:table;  /* 调教webkit*/

    word-spacing:-1em;

}



.nav li { *display:inline;}