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
网友评论