line-height:1.5更安全，因它继承无单位系数，子元素按自身font-size重新计算行高；而line-height:150%先计算父级绝对值（如20px×150%=30px）并直接继承该像素值，子元素字号变大时易导致文字重叠或行距不足。
line-height用1.5和150%在继承时行为完全不同
表面看两者都等于“字号 × 1.5”，但子元素继承方式截然不同：1.5是把系数传下去，子元素用自己的font-size重新计算；150%则先算出父级的绝对行高（比如font-size: 20px → line-height: 30px），再把这个30px直接继承给子元素，不管子元素字号多大。
为什么line-height: 1.5更安全
它天然适配响应式和字体变化场景，避免文字重叠或行距崩塌：
- 父元素
font-size: 16px; line-height: 1.5→ 行高为24px - 子元素
font-size: 24px→ 自动按1.5 × 24 = 36px渲染，比例一致 - 若用
150%，子元素继承的是24px这个固定值，遇上24px字体就只剩1px上下余量，极易重叠
line-height: 20px这类带单位值的坑在哪
它完全切断继承弹性，尤其在嵌套文本、动态字号或CSS-in-JS场景里容易出问题：
- 所有后代无论字号大小，行高都被锁死在
20px - 中文字体通常需要更大行距，
20px在18px字号下可能压住下划线或拼音 - 媒体查询改了
font-size，但忘了同步调line-height，视觉节奏瞬间失衡
什么时候可以放心用百分比或em
仅限于你明确控制了整个文本流的字号层级，且不依赖继承传播——比如独立卡片标题、按钮文字等封闭组件：
- 按钮内文字固定
font-size: 14px，设line-height: 1.4em可精准控制高度 - 但不要在
body或article这类容器上用140%，否则h1/p/small全被同一像素值约束 - 注意
100%≠1：前者继承计算值，后者继承系数，语义和效果都不等价
实际排版中最容易被忽略的，是把line-height当成纯视觉微调工具——它本质是字体度量系统的一部分，一旦混用单位，继承链就从“比例传递”退化成“像素搬运”，后续任何字号调整都会触发连锁校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
