去除 span标签之间的空隙

在我们使用span标签时，如果想要换行就会发现两个span标签之间会有间隙，如下：

<div class="box">
    <span>一</span>
    <span>二</span>
</div>

span{
    display: inline-block;
    width: 30px;
    height: 30px;
    background:brown;
    line-height: 30px;
    text-align: center;
}

如果不想把两个span标签放在一行，这里我们可以使用CSS样式去除之间的间隙，只需要在两个span标签的父元素上使用

font-size:0;

即可，如下：

.box{
    font-size: 0;
}
span{
    display: inline-block;
    width: 30px;
    height: 30px;
    background:brown;
    line-height: 30px;
    text-align: center;
    font-size: 16px;    /* 再次设置 font-size 样式 */ 
}

注意：font-size 是会传递的，因此，要在span标签样式里面，再次设置font-size。