HTML多个同一行的多个span标签中有空白间距

同一行的多个span标签

span之间并没有设置margin，但是有莫名其妙的空白

css样式：

#nav-list{
	width: 1000px;
	height: 60px;
	margin: 0 auto;
	padding: 0 100px;
	text-align:center;
	background-color: #E9E9E9;
}
#nav-list span{
	display: inline-block;
	font-size: 18px;
	width: 200px;
	text-align: center;
	line-height: 60px;
	font-weight: 800;
	cursor: pointer;
}

HTML代码：

<div id="nav-list">
    <span class="active">教学材料</span>
    <span class="active">中考资源</span>
    <span class="active">备课/备考</span>
    <span class="active">教育教学</span>
    <span class="active">交流研讨</span>
</div>

一阵折腾后发现： span的换行符在页面上被显示为空白，多个span间无空白则正常

<div id="nav-list">
    <span class="active">教学材料</span><span class="active">中考资源</span><span class="active">备课/备考</span><span class="active">教育教学</span>  
</div>

或者设置多个span： float：left