css 两个行内快元素上下不对齐解决

骑猪看日落 2022-12-25 04:56 446阅读 0赞

两个行内块元素都加上

vertical-align:top;

原因：

摘抄地址：[https://www.cnblogs.com/qfly/p/8085125.html][https_www.cnblogs.com_qfly_p_8085125.html]

## [同一DIV内，两个行内块元素不对齐的解决方案][https_www.cnblogs.com_qfly_p_8085125.html] ##

这个跟基线对齐有关系，如果你给写文字的那个`span`设置一个`vertical-align:top`,就可以对齐，具体原因如下：  
从CSS2的可视化格式模型文档中可以看到：  
`inline-block`的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身`overflow`属性的计算值不是`visible`，这种情况下基线是`margin`底边缘。  
举例：

运行结果：

![645b351cac1f44df61efbb0ebb99d4e6.png][]  
因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。  
如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以：   
![c0a131bcca9ff0222fbc73e42fb6c174.png][]  
这就是为什么出现这个问题的原因，通过改变对齐方式可以达到对齐。  
具体关于`vertical-align`的讲解可以看看张鑫旭老师的[CSS深入理解之vertical-align][CSS_vertical-align]

[https_www.cnblogs.com_qfly_p_8085125.html]: https://www.cnblogs.com/qfly/p/8085125.html
[645b351cac1f44df61efbb0ebb99d4e6.png]: /images/20221120/81046ce08a404e09bf691d7a8bf5f5e2.png
[c0a131bcca9ff0222fbc73e42fb6c174.png]: /images/20221120/76a6fabd6c1f450983e3b7bd6073134a.png
[CSS_vertical-align]: http://www.imooc.com/learn/542