inline和inline-block的间隙问题

我们在前端布局的时候，会偶尔发现，在具有inline/inline-block属性的元素间存在一小段间隙，网上有些文章说这个间隙是6px，但我觉得应该是一个空格的宽度。

这里以inline-block(IE6、IE7不支持，也就是存在兼容问题)为例：

下面是一些代码及其相应的效果图：

CSS:

span{
        background:red;
        display:inline-block;
}

HTML:

<span>你好</span><span>你好</span><span>你好</span><span>你好</span>

效果图：

如果只更改HTML部分为

<span>你好</span><span>你好</span>
<span>你好</span><span>你好</span>

则效果图：

可以看到中间多出了一个小间隙，这个间隙就是由换行产生的。

如果同时又更改CSS部分，设置font-size为一个比较大的值

*{
    font-size:36px;
}
span{
        background:red;
        display:inline-block;
}

我们有下图

可以看到间隙变大了。

如果我们把HTML部分换行替换成空格，可以得到上图一样的效果

由此可见，inline/inline-block之间的间隙确实由换行符产生，其大小为一个空格宽度（这里要说明一下，这个空格宽度是指相应父元素的空格宽度）。

附加：inline-block兼容问题

要解决inline-block的兼容问题，首先要了解兼容问题产生的原因。

1、IE6、IE7不识别inline-block但可以触发块元素。

2、其他主流浏览器都支持inline-block。

解决方法：

1、兼容IE6、IE7:首先设置inline-block触发块元素，使其具有layout属性，其次设置inline，此时layout属性不会消失。或者设置inline，然后再设置zoom:1触发layout。

2、兼容所有主流浏览器：

display:inline-block;

*display:inline;

*zoom:1;