inline和inline-block的间隙问题

标签：style   blog   http   color   sp   div   2014   on   问题   

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

这里以inline-block为例：

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

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和inline-block的间隙问题

标签：style   blog   http   color   sp   div   2014   on   问题   

原文地址：http://www.cnblogs.com/aaron-shu/p/4047739.html