line-height是CSS属性，非HTML5原生属性；其推荐值为无单位数字（如1.5），可继承且不二次缩放；length（如20px）和percentage（如150%）易导致嵌套异常或视觉拥挤。
HTML5 本身没有 line-height 属性——它是 CSS 的属性，但常被误认为属于 HTML 标签。直接在 HTML 元素上用 style 设置或通过外部 CSS 控制，才是正确路径。
line-height 可接受的值类型有哪些
值类型直接影响继承行为和响应式表现，选错会导致子元素行高意外放大或塌陷：
-
number（无单位数字，如1.5）：最推荐。相对于当前字体大小计算，可继承且不随父级font-size改变而“二次缩放” -
length（带单位，如24px或1.2em）：px值不可继承（子元素用默认行高），em会叠加父级字号，容易失控 -
percentage（百分比，如150%）：按父元素的font-size计算，但会继承计算后的绝对值，行为接近length
在内联样式中设置 line-height 的常见错误
很多人写 ，结果多段文字混排时行高不一致，尤其遇到 small 或 sup 这类改变字号的内联元素：
正常文字 小号文字 后续文字
这时 内容的行高仍为 20px，但字体变小后视觉上显得“挤”。应改用无单位数值：
立即学习“前端免费学习笔记（深入）”；
正常文字 小号文字 后续文字
line-height 与 font-size 的典型搭配参考
视觉舒适度取决于字号与行高的比例，不是固定公式，但有经验区间：
-
font-size: 14px→line-height: 1.4 ~ 1.6（约 19–22px） -
font-size: 16px→line-height: 1.5 ~ 1.7（约 24–27px） -
font-size: 18px→line-height: 1.4 ~ 1.6（大字号反而略降低倍率更易读） - 中文排版建议最小行高不低于
1.3，否则字形易粘连
使用 rem 或 em 设置 line-height 的陷阱
用 line-height: 1.5em 看似灵活，实则危险——它会基于当前元素的 font-size 计算，而该值可能来自继承或重置，导致嵌套时逐层放大：
第一层
第二层：实际 line-height = 12px × 1.5 = 18px
这种“相对再相对”的行为难以预测。若需响应式缩放，请统一用无单位数值（如 1.5），它始终相对于自身的 font-size，不会跨层级污染。
真正难处理的是混合中英文、图标字体、垂直对齐的场景——这时候 line-height 往往要配合 vertical-align 和 padding 调整，单靠一个属性很难一劳永逸。
