行高、（顶线、中线、基线、底线）、vertical-align

（1）基线

• 基线
  • 沿着文本最底部的 一行线, 基线（base line）并不只是 汉字文字的下端沿
  • 若一行文本 有中文和英文，则基线会在 英文 x最底部。

行高、基线、顶线、中线、底线 示例图

• 元素框
  • 每个元素 都会生成 一个或多个 矩形框，这称为 元素框 / 行框。（上图中黄色背景部分）

（2）内容区

• 内容区
  • 指 顶线 和 底线 包裹的区域， inline元素可以通过background-color属性显示出来
  • 各元素框中心 有一个 内容区 ，这个内容区 周围有 可选的内边距、边框和外边距。实际中 不一定看得到，但确实存在。
• 内容区的大小
  • 根据 字体大小font-size的值 和 字数 进行变化。
  • 字体大小font-size值 确定了 内容区的高度。
  • 如果一个inline元素font-size:15px，则 内容区的高度 = 15px。
  • 内容区 就是一个框，而 每一个文字 都有它的em框（em框 确定 每个文字的高度）。

（3）行高

• 行高（line-height）
  • 内容区 + 以内容区为基础 对称拓展的 空白区域，我们称之为 行高。
  • 一般情况下，也可以认为是相邻文本行 基线到基线 的 距离，中线到中线 的距离。
  • 一个线,到另一个相邻行 相同的线,都是行高。
  • 所以，很显然，内容区 一般是小于 行高 的。
• 元素居中时的行高
  • 让元素在指定区域内 上下居中：行高 = 行距 * 2 +font-size

• 行高和字体大小
  • 行高line-height< 字体大小font-size时, 将出现 行距为负数的情况，也就是两行文字 将部分重合。

（4）行距

• 行距：指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
• 半行距：半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2。

（5）行内框、行框

• 行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框等于内容区域，而设定行高时行内框高度不变，半行距[（行高-字体size）/2]分别增加/减少到内容区域的上下两边（深蓝色区域）。
• 行框（line box）：行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

（6）注意点

• 单行文字垂直居中

line-height的大小为元素的高度即可实现效果。

<div style="line-height:100px;border:dashed 1px #0e0;">
   This is a test.
</div>

• 元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区高度与字体尺寸有关，padding不对行高造成影响。设置padding增加的是 行内框（内容区）向外扩散的距离。但行高还是不变的，也就是说，如果padding设置的比行高大，就会出现行内框 > 行框的现象。但是在文档流中，padding是会占据空间的，如果有父元素，父元素的高度还是按照行高来决定。

<div style="border:dashed 1px #0e0;margin-bottom:30px;">
  <span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
  <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>

第二个span虽然因为padding原因内容区变大，但行高并未改变。

• 行高的继承

行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。

<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
  <p style="font-size:30px;">
    1232<br/>
</p>
</div>

如果属性值没有单位，则浏览器会直接继承这个因子（数值），而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height值。

参考文章1：(46条消息) 【基线,内容区, 行高/行间距,行距, 行内框,行框的 区分说明】_Hey_Coder-CSDN博客

参考文章2：css基线与行高 - 简书 (jianshu.com)

参考文章3：行内框和行框的概念，line-height和vertical-align的关系理解 - true！ - 博客园 (cnblogs.com)

参考文章4：【学习笔记】理解 line-height - 掘金 (juejin.cn)

参考文章5：深入理解 CSS：字体度量、line-height 和 vertical-align - 知乎 (zhihu.com)