line-height能撑开span高度，是因为span作为行内非替换元素不生成独立块盒，其视觉高度由所在行框决定；line-height设定其行内框高度，进而影响整行最小高度。
line-height 为什么能撑开 span 的高度？
因为 span 这类行内非替换元素本身不生成独立的块级盒，它的“高度”实际由所在行框（line box）决定；而 line-height 直接设定了该元素参与构建的行内框（inline box）高度——浏览器据此推算出整行的最小高度。
常见错误现象：span { line-height: 40px; } 单独写在空容器里，看起来没变化；但一旦父元素是 div 且没有其他内容，span 就会把父 div 带高到 40px（前提是父元素没设 height 或更小的 line-height）。
关键点在于：这个“高度”不是 span 自己的盒模型被拉伸了，而是它所在的那一行被撑开了。你用 getBoundingClientRect().height 读到的是行框高度，不是 span 的 content box。
line-height 对 inline 元素生效的前提条件
它只在以下情况真正影响视觉高度：
-
span处于一个可形成行框的上下文中（比如包裹在p、div等块级容器中，且未被display: inline-block改写） - 该行内没有其他更高行高的兄弟元素（否则取最大值）
- 未设置
vertical-align: top/bottom等导致行框重排 - 父元素未显式限制高度（如
height、max-height）
如果 span 是孤立存在的（例如直接挂在 body 下，且后面没换行或兄弟内容），浏览器仍会为它创建一个匿名行框，line-height 就会起效——但这种行为容易被误判为“没反应”，其实是开发者工具没选对计算节点。
数值型 line-height（如 1.5）和带单位型（如 24px）的区别
这直接影响继承与响应性：
-
line-height: 1.5是无单位数值，继承时乘以**子元素自身的font-size**，适合全局排版控制 -
line-height: 24px是绝对长度，继承后固定为 24px，与子元素字号无关，易导致小字号文字行高过大、大字号文字挤在一起 -
line-height: 1.5em是相对父元素font-size计算的，嵌套深时极易失控，不推荐用于行高
例如：div { font-size: 16px; line-height: 1.5; } span { font-size: 12px; } → span 实际行高 = 12px × 1.5 = 18px；若父用的是 line-height: 1.5em，则 span 继承的是 24px（16px × 1.5），不再随自身字号缩放。
为什么给 span 加 border 或 padding 不会改变行高？
因为 border 和 padding-top/padding-bottom 对行内非替换元素无效——它们会被浏览器忽略或重置（margin 同理）。只有 padding-left、padding-right、border-left、border-right 可见。
想让 span “真正占高”，必须切换显示模式：
-
display: inline-block+line-height+vertical-align（否则基线对齐会留白） - 或直接用
display: block，此时line-height作用于其内部文本，但盒子本身高度由内容+行数决定
最常被忽略的一点：字体本身的度量（ascent/descent）会让实际行框略高于 line-height 计算值，尤其在 macOS 或使用某些字体时——这不是 bug，是渲染引擎预留的字形空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
