行高、（顶线、中线、基线、底线）、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
- 让元素在指定区域内 上下居中：行高 = 行距 * 2 +
- 行高和字体大小
- 行高
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)
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。