首页 > 其他 > 详细

inline和inline-block的间隙问题

时间:2014-10-24 12:25:33      阅读:121      评论:0      收藏:0      [点我收藏+]

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

这里以inline-block为例:

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

CSS:

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

HTML:

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

效果图:
bubuko.com,布布扣

如果只更改HTML部分为

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

则效果图:

bubuko.com,布布扣

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

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

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

 

我们有下图

bubuko.com,布布扣

可以看到间隙变大了。

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

bubuko.com,布布扣

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

 

inline和inline-block的间隙问题

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!