解决inline-block元素的空白间距问题

使用场景:

html code:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>


css code:

ul{
    list-style:none;
    background: orange;
}
li{
    width:100px;
    height:100px;
    background: blue;
    display: inline-block;
}
ul li:first-child{
    background: red;
}
ul li:last-child{
    background: green;
}


那么出来的效果却是酱紫的,每个li元素之间多了4px的空白间距。

比较完美的解决的办法是使用纯css,代码如下

ul{
list-style:none;
background: orange;
letter-spacing: -4px;  /*兼容Safari*/
word-spacing: -4px;  /*兼容Safari*/
font-size:0;  /*兼容chrome*/
}
li{
    width:100px;
    height:100px;
    background: blue;
    display: inline-block;
    letter-spacing:normal;
    word-spacing:normal;
    font-size:14px;
}


效果如下:

BaiduShurufa_2015-3-6_20-42-23.png