line-height直接决定盒模型高度：块级元素内容区高=行高值，行内元素高度由行高主导而非font-size；无单位数值最安全，避免继承偏差。
行高（line-height）不是“额外加在文字下面的空隙”，它直接参与盒模型高度计算——尤其对块级容器和行内元素，line-height 经常比 font-size 更决定实际占用空间。
块级元素高度由 line-height 主导，而非 font-size
当一个 <p></p> 或 <div> 仅含单行文本且未设 <code>height，其内容区高度就等于 line-height 值（前提是无 padding/border 干扰）。这不是“撑开”的，而是浏览器按行框规则直接采用该值作为内容高度。
-
font-size: 14px; line-height: 20px;→ 内容区高 20px，哪怕文字本身只占 14px - 若同时设
padding: 10px，最终盒高 =line-height+ 上下padding= 40px - 若设
height: 16px，会裁剪文本（除非overflow: visible），因为height优先级高于line-height的自然高度
行内元素（span、em）的 height 属性无效，line-height 才是真高度
给 span 设置 height: 30px 完全不生效；它的垂直空间完全由所在行的 line-height 和父容器的行框规则决定。
- 多个
span混排时，整行高度取其中最大line-height（或对应字体内容区 + 行间距） - 若父容器
line-height: 1.5，子span设line-height: 2，则该span所在行框会被拉高 -
vertical-align作用对象是行框内的基线位置，不是相对于父容器 height，所以错配line-height和vertical-align会导致视觉错位
line-height 的数值类型影响继承与计算逻辑
用无单位数值（如 line-height: 1.6）最安全；用像素或百分比容易在嵌套中放大误差。
-
line-height: 1.6→ 子元素继承的是乘数，计算基于自身font-size，不会滚雪球 -
line-height: 160%→ 继承的是计算后的像素值（比如父font-size: 20px→line-height: 32px），子即使font-size: 12px仍用 32px，可能挤压文本 -
line-height: 0→ 内容区域仍存在，但行间距为负，常用于隐藏文字只留图标（需配合overflow: hidden防溢出）
多行文本的总高度 ≠ line-height × 行数，但接近
理论上是，但实际受字体度量（ascent/descent）、font-family 差异、以及最后一行是否截断影响。尤其在 Web Fonts 加载未完成时，浏览器可能用 fallback 字体渲染，导致行高突变。
- Chrome/Firefox 对 OpenType 字体的 ascent/descent 解析略有差异，同一
line-height在不同浏览器中可能差 1–2px - 避免依赖精确行数算总高；用
max-height+overflow: hidden控制截断，比手动计算更可靠 - 需要严格垂直居中多行文本时，
line-height不够用，得上display: flex或grid，否则上下留白不对称
真正容易被忽略的是：行高参与构建的是“行框”（line box），而行框是匿名的、不可选中、无法直接调试的——你看到的容器高度，往往是多个行框叠加+ padding/border 的结果，不是某个单一属性的镜像。改 line-height 前，先用浏览器开发者工具的“Layout”面板看 content area 和 line box 边界，比猜更准。
