这个跟基线对齐有关系，如果你给写文字的那个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

版权声明：本文为qfly原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qfly/p/8085125.html