inline-block元素间间距问题

当我们让多个inline-block元素并排显示时，会发现它们之间是存在间距的。

主要代码如下：

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>

li{
    display: inline-block;
}

其实，不仅inline-block元素，将li元素的display类型改成inline，会发现inline元素也是会产生此种间距的。

去除间距有如下方法：

1. 使前一个li元素结束标签和后一个li元素开始标签没有空格

<ul>
    <li>
        li1</li><li>
        li2</li><li>
        li3</li><li>
        li4</li>
</ul>

空格就消失了：

2. 给父标签设置font-size:0;

该方法可以解决大部分浏览器下inline-block元素之间的间距问题(IE7等浏览器有时候会有1像素的间距)。

ul{
   font-size:0;
}

3. 设置负margin

margin负值的大小与上下文的字体和文字大小相关，自行调整。

li{
    display: inline-block;
    margin-right: -5px;
}

4. 设置float

li{
    float:left;
}