可能是设置成了inline-block。
第一种解决方案是，去掉span标签内的空白。
第二种解决方案是，设置margin负值，但要根据字体调整，不方便大规模使用。

补充一下：
可以设置父元素 font-size: 0; 解决，或者父元素设置 display:flex/inline-flex;，
应该还有很多方案，欢迎补充。

不是我吐槽 这题目也才粗糙了

不是我吐槽 这题目也才粗糙了

@cleverboy32 题目确实不是很完美，亲可以PR提供优质题目哈。欢迎拍砖，但是高质量的喷才是能力的体现。

@cleverboy32 欢迎PR！

@cleverboy32 @xiangshuo1992 题目难易程度我一般是这么定义的。连续问3个why，如果我都能自己答得上来，表示这道题我懂了。

1. 出题者的意图是什么？
2. 造成这问题的表面原因和深入原因是什么？
3. 解决方案有哪些？哪个比较好？

@haizhilin2013 对啊 我就看不懂这道题在问啥 - -

@楼上，你遇见过这bug不？

没有。。。。。所以题目粗糙。。。。。

@cleverboy32 应该是很常见的问题，可能你没有注意，你可以先去看下张鑫旭的文章，搜索“幽灵空白节点”关键字，会出来相应的介绍文章，其在《CSS世界》中也有频繁提及。

应该是回车空格吧 幽灵空白那个我也看了 没仔细记原因 只记得每次遇到这问题 上来就是font-size:0

没有。。。。。所以题目粗糙。。。。。

真可爱，题目确实都很简单。我以为你和我是同感，原来你连题目都没看懂。

说几个另外的路子。
float，12（连着写）

有没有大佬解答一下为什么会出现这种现象

解决办法有3种：没遇到过这个情况，根据网上的文档总结一下；
不同浏览器对于内联元素的解析是不一样的，有的浏览器比如chorme只需要span和span在一行上写就可以了；

第二种是： font-size给父元素设置，然后再给span单独设置也可以
第三种是：给子元素浮动，父盒子清除一下，但是针对部分场景，一般不推荐使用

span回车换行的时候, 它就会有那个间隙,至于为什么回车换行就会有间隙,不清楚...
解决方法

1.父元素设置font-size:0,自身再设置font-size
2.同一方向浮动
3.负外边距
4.父元素display:flex,inline-flex,table,inline-table,table-footer-group,table-header-group,table-row,table-row-group
父元素display:table相关的只是简单的试了一下,复杂的情况有没有什么副作用之类的不清楚...

没有。。。。。所以题目粗糙。。。。。

没有看懂题目,所以题目粗糙,这什么逻辑...不是应该先看是不是自己的知识盲区吗...

补充一下
产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响

间隔是由于代码中的回车换行（空白节点）引起的。

<style>
    .wrap>span {
      background: red;
    }
</style>
<div class="wrap">
  <span>hello</span>
  <span>world</span>
</div>

上面代码中的span可以明显地看到有间隔，解这几种决办法：

• 去掉换行，将 span 写成一行 <span>hello</span><span>world</span>
• 父元素使用 flex 布局：.wrap {display: flex; flex-direction: row;}
• 父元素设置 font-size: 0;，span 子元素再设置字体大小 font-size: 16px;
• span 子元素设置 float: left

父节点font-size:0

可能是设置成了inline-block。
第一种解决方案是，去掉span标签内的空白。
第二种解决方案是，设置margin负值，但要根据字体调整，不方便大规模使用。