同一DIV内，两个行内块元素不对齐的解决方案

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

转载于:https://www.cnblogs.com/qfly/p/8085125.html