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

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

1  行内元素 2  行内元素 3  行内元素 4  行内元素  

效果如下图：

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

 行内元素  行内元素  行内元素  

效果如下图：

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

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

　　　　　　　http://HdhCmsTestcnblogs测试数据/PeunZhang/archive/2012/09/28/2706094.html

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

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

查看更多关于空格导致行内元素水平间隔问题_html/css_WEB-ITnose的详细内容...