空格导致行内元素水平间隔问题_html/css_WEB-ITnose

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

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。