这个跟基线对齐有关系，如果你给写文字的那个span设置一个vertical-align:top,就可以对齐，具体原因如下：
从CSS2的可视化格式模型文档中可以看到：inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。
举例：
<style> .dib-baseline{ display: inline-block; width: 150px; height: 150px; border: 1px solid #cad5eb; background-color: #f0f3f9; margin-top: 20px; } </style> <span class="dib-baseline"></span> <span class="dib-baseline">dib-baseline</span>运行结果：
因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。
如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以： 
这就是为什么出现这个问题的原因，通过改变对齐方式可以达到对齐。
具体关于vertical-align的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align