在设置标题的时候为什么span标签之间会有缝隙

<div class="main">
        <div class="title">
            <span class="active">首页</span>
            <span>点击查看</span>
            <span>会自动的</span>
            <span>我的网站</span>
        </div>
        <div class="banner">

css样式

.mian{
    width: 1200px;
    height: 500px;
    margin:30px auto;
    overflow: hidden;
    position: relative;
}
.title{
    width: 1200px;
    height: 40px;
    background: pink;
/*    position: absolute;*/
}
.title span{
    display: inline-block;
    width: 300px;
    height: 40px;
    background: #FFF;
    text-align: center;
    line-height: 40px;
}
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}