无单位数值（如1.6）是line-height最稳妥做法，因其为当前font-size倍数，可随字号动态计算、保持视觉节奏一致；像素值易失衡，em/rem易受祖先影响，内联元素需配合vertical-align使用。
直接用 line-height 的无单位数值（比如 1.6）是最稳妥、最可维护的做法；像素值（如 24px）在字号变化或缩放时会立刻失衡，不建议用于正文。
为什么无单位数值是大段文本的首选
它不是固定高度，而是当前 font-size 的倍数。浏览器会为每个元素动态计算：比如 font-size: 16px 时 line-height: 1.6 算出 25.6px；同个段落里有个 span 把字号放大到 20px，那行高自动变成 32px——视觉节奏始终一致。
常见错误现象：line-height: 20px 套在 p 和 h2 上，结果标题行距松垮、正文却挤成一团；响应式切换字体大小后，行高完全“卡死”，阅读体验断层。
- 中文正文推荐范围：
1.5~1.8，视字体降部（如 “g”、“y”）长度实测微调 - 英文为主内容可略低（
1.4~1.6），但思源黑体、Noto Sans 等开源字体常需更高值 - 避免用
em或rem写line-height，它们受祖先元素字号影响，容易意外放大
多行省略（-webkit-line-clamp）必须配对设置
用 -webkit-line-clamp: 3 截断三行时，line-height 不只是“看起来舒服”，它直接决定容器总高是否能完整容纳三行+省略号。
错误写法：line-height: 1.6em + max-height: 48px → 单位混用，且 em 在祖先缩放时会漂移。
- 统一用无单位值：
line-height: 1.6 -
max-height必须等于line-height × 行数，推荐calc(1.6em * 3)（em此处指当前元素字号，安全） - Firefox 不支持
-webkit-line-clamp，若用 JS 实现截断，line-height仍是计算行数的唯一可靠依据
内联元素（a、span）里 line-height 为啥“没反应”
line-height 作用对象是**行框（line box）**，不是单个内联元素。给 a 单独设 line-height: 2，父 p 已经撑开整行，它只是被塞进那个框里对齐而已。
真正控制它上下位置的是 vertical-align。默认 baseline 容易让文字底部贴底，显得行距不足。
- 想让链接在行中“站直”，优先试
vertical-align: middle或text-bottom - 表单控件（
input、button）是替换元素，line-height只影响其所在行框高度，不改变自身尺寸 - 如果用
display: inline-block模拟行内布局，line-height仍只作用于父容器的行框，不是子块本身
最常被忽略的点：当 CMS 或用户输入内容结构不可控时，别用通配符 * { line-height: 1.6 !important } 强制覆盖——它会破坏按钮、表格单元格等组件的原有排版。应该把 line-height 明确施加在内容容器上（如 .article-content），并配合 all: unset 或针对性重置，才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
