inline和inline-block的间隙问题

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

这里以inline-block(IE六、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的兼容问题，首先要了解兼容问题产生的缘由。

一、IE六、IE7不识别inline-block但能够触发块元素。

二、其余主流浏览器都支持inline-block。

解决方法：

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

二、兼容全部主流浏览器：

display:inline-block;

*display:inline;

*zoom:1;