偶遇问题 - - 空格导致行内元素水平间隔问题

在测试块级元素与行内元素区别时,发现本该没有间隔在一行的行内元素中间出现水平间隔。

1 <span>行内元素</span>
2 <span>行内元素</span>
3 <span>行内元素</span>
4 <span>行内元素</span>

效果如下图:

 

导致这种问题出现的原因在于html中span便签之间的空格。如果去掉空格那么就不会有间隔。

<span>行内元素</span><span>行内元素</span><span>行内元素</span>

效果如下图:

 

虽然找到了问题所在,可是如果有多个行内元素,代码挤在一行会造成阅读困难,怎么办呢?

 

 拓展阅读:1.【原】行内元素产生水平空隙是bug吗 - 白树 - 博客园 

       http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html

     2.  http://davidwalsh.name/remove-whitespace-inline-block

 

经过上网搜索资料,发现"行内元素之间产生的间距,是由于换行符、tab(制表符)、空格等字符引起,而字符的大小是定义字体大小来控制",所以去除间隔可以从改变字体的大小入手。即font-size:0;不过具体使用还得做相应调整,不一定是值为0。

 

posted @ 2015-09-03 20:22  漫漫晓路  阅读(338)  评论(0编辑  收藏  举报