inline-block元素间间距问题

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

主要代码如下：

    
li1
    
li2
    
li3
    
li4

```

```
li{
    display: inline-block;
}
```
其实，不仅inline-block元素，将li元素的display类型改成`inline`，会发现inline元素也是会产生此种间距的。
##去除间距有如下方法：

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

```

    

        li1

        li2

        li3

        li4

```
空格就消失了：
![](http://upload-images.jianshu.io/upload_images/3259417-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;
}
```

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