行高与 leading：行与行隔多远
印刷时代，排工在铅字行之间垫一条薄铅片来加大行距，那根铅片叫 lead（铅）。CSS 的 line-height 就是「行盒高度」：它减去 font-size 之后剩下的空间叫 leading，浏览器把它对半分贴在文字上下，这半份就是
half-leading。行盒(line box)与 inline 布局的基础概念，可参考 inline-block 系列。
下方舞台用真实 getBoundingClientRect() 测出每行行盒边界：琥珀色块 是 half-leading,绿色块 是首行顶部因 half-leading 多出的空隙，蓝线 是行盒边界。调整行高写法，观察子元素大字如何受继承方式影响。
1 · half-leading 把文字垂直居中在行盒里
- leading =
line-height 计算值−font-size。浏览器将这段空间对半——各 half-leading 贴在字形上方和下方。这就是为什么文字块的顶部和底部总比内容高多出半个 leading。 - 单行垂直居中的偏移来源: 用
line-height做单行垂直居中(line-height = container height)时，有时视觉上仍略偏上——原因是字体的 ascender/descender 并不对称，cap height 通常低于行盒顶边，视觉重心自然偏上。text-box-trim能修正这一问题。 -
line-height: normal由字体 OS/2 表的 metrics 决定，约等于1.1 ~ 1.3（依字体而定），比正文推荐值1.4~1.6要小；多行正文不建议用normal。
数值 vs 长度——继承行为的关键差异。 line-height: 1.5（数值）继承的是比例系数，子元素会用自身
重新计算 → 大字行盒也跟着变大，文字不重叠。line-height: 28px（长度 / 百分比）继承的是已计算的像素值，子元素拿到的仍是固定 28 px——若子元素 font-size 超过 28 px，行高不足，上下行文字直接重叠。切到「长度 (px)」再把
font-size 调大，观察「大字」行与相邻行碰撞，verdict 里会实测该子元素的 line-height。
text-box-trim / text-box-edge (CSS Inline Layout Level 3) 允许把首行上方和末行下方的 half-leading 空间裁掉，使文字块顶边贴到 cap height，底边贴到 baseline 或 alphabetic descender——这样文字块才能真正「视觉对齐」容器内边距。点击「裁切首尾
half-leading」观察首行顶部绿色空隙的变化；若浏览器未实现，verdict 会如实提示。
2 · line-height 小于内容高度：行内框「渗」进相邻行
line-height 只决定行盒(line box)的高度，并不裁剪内容：字形本身、以及行内元素的 background / border（行内框 inline box）照常按字体的内容高度绘制。把
line-height 压到内容高度以下，相邻行盒互相贴近，行内框就会越界渗入上下行——且按绘制顺序，后面行的背景会盖住前面行的文字。拖滑块把 line-height 压到 1 以下观察这一现象。
浏览器允许这种「重叠」的原因。 CSS Inline Layout 规定行内级盒子的 background / border 不参与行盒高度计算（只有 font-size、line-height、vertical-align 参与），所以给 inline 元素加 padding / border 垂直方向「不占位」——这是特性不是
bug。需要行内元素真正撑开行高时，改用 display: inline-block，它的 margin box 会完整参与行盒计算。