你真的理解 line-height 和 vertical-align 与 基线 吗?

line-height 和 vertical-align 都是简单的 CSS 属性,以致于大多数人自以为知道这两个属性的工作原理,但实际上这两个属性没那么简单,下面可能能让你加深理解这2个属性

有关于基线:

基线的位置是怎么确定的呢?—— 字母x的下边缘线


vertical-align属性中,其默认值为baseline( 基线 ):使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线,这意味着这些元素使用此值的表现因浏览器而异。

注意 vertical-align 只对行内元素、表格单元格元素生效:不能用它垂直对齐块级元素

问题1:下面代码中,第二个 span 的 font-size 变成 50px。此时p的高度是多少?(还是200px吗?)
<p style='background:green;font-size: 100px;line-height: 200px;'>
    <span style='background:red'>Ba</span>
    <span style='background:yellow'>Ba</span>
</p>
p的盒模型
问题二:下面代码中,此时p的高度是多少?(是200px吗?)
<p style='background:green;line-height: 200px;'>
    <span style='background:red;font-size: 100px;'>Ba</span>
</p>
答案1:此时的p的高度变高了。
p的盒模型

看下面的图,已经可以大概明白是为什么了。字体变小的时候,实际内容的中间线(行高是以实际内容的中间线等分的)与基线更靠近了。所以导致了下面的结果,高度被撑高了。


答案2:此时的p的高度大于200px。
p的盒模型

因为浏览器认为每个“行框盒子”前面,存在一个同时具有该元素的字体和行高属性且宽度为 0 的内联盒(CSS 中称为 strut)。知道了这个,剩下的就和第一个问题的内容一样了。(这里有一个前提,文档声明必须是HTML5文档声明,如果还是很多年前的老声明,则不存在strut)
下面的图,我在p元素里加了X,应该可以更容易明白这个问题。


p的盒模型

想当初,遇到上面相似的奇怪现象,纠结半天一直没懂。现在了解到基线,然后明白 line-height 和 vertical-align的相互影响,之前令人费解的现象总算明白了。

参考链接:https://zhuanlan.zhihu.com/p/25808995
https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/
https://www.cnblogs.com/beginner2014/p/9366682.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

推荐阅读更多精彩内容