這個跟基線對齊有關系，如果你給寫文字的那個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