设置display:inline-block后内容为空和不为空 位置发生改变

将四个span标签设置diplay:inline-block，起始值都为空时，保持在同一水平位置

这里的css如下，自己感觉完全不会有问题的

span{
     display: inline-block;
     width: 35px;
     height: 35px;
     color: #000000;
     line-height: 35px;
     margin: 0 5px;
     background: #ffffff;
     border: 1px solid #533511;
}

但是当span标签内有内容的时候，位置却发生了变化

我觉得是diplay:inline-block的影响，就换成浮动布局试了一下，果然就不存在这个问题，但是浮动布局不太合适我当前的需求，最后搜索到解决方法，是在span的样式里加overflow:hidden，或者vertical-align:middle，具体为什么，还没找到答案