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>
```
空格就消失了：
![](https://img.haomeiwen.com/i3259417/abde4f68f7c93926.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###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;
}
```

_____________________________________________________
 ©  本文归饥人谷和本人所有，如需转载请注明来源。