行高
Line Height
别名:行高行距leading行间距排得挤不挤松紧line height
这是什么
一行文字占的垂直空间，决定段落的松紧与呼吸。标题收紧（1.1～1.3）显得挺拔，正文放宽（1.5～1.8）利于逐行阅读，引文可以更松。优先用无单位倍数，让行高随字号缩放，而不是写死像素值。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 长段落正文需要可逐行追踪的阅读节奏
- 标题与正文混排，需要通过行高拉开层级
- 字号会响应式变化，行高必须跟着缩放
✕ 不适用场景
- 单行标签、按钮文字——行高只用来垂直居中时改用 flex
- 行高设得过松（> 2.0 正文），行与行失去联系
- 用 px 锁死行高，字号一变就出现裁切或重叠
常见形式
收紧显示
Tight display
1.1～1.3，大标题挺拔不散
舒适正文
Comfortable body
1.5～1.8，长文逐行好跟
松弛编辑
Loose editorial
1.9～2.2，引文与短诗留呼吸
实现要点
line-height: 1.6line-height: normalleading-relaxed行高写无单位倍数（line-height: 1.6），继承时按自身字号换算；写 px 会把子元素行高锁死在父级字号上。经验值：标题 1.15～1.3、正文 1.6～1.75、辅助文字 1.4。中文正文比英文略松（1.7 上下）更耐读。用 ex / 半 leading 技巧做首行基线对齐时要单独验证。
平台 API
line-heightleading代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | line-height |
| Tailwind CSS | leading-none / leading-normal / leading-relaxed |
横向对比
查看完整对比 →相关概念
用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础搭配使用一段文字每行容纳的字符数，决定眼睛回行是否省力。舒适区大约 45～75 个拉丁字符（中文 28～40 字），最常用 65ch 左右。行太窄回行太频繁，太宽则跟丢行；用 max-width 以 ch 为单位控制，比按像素猜更可靠。
基础搭配使用按优先级排列的字体回退链：首选字体缺席时依次落到下一个，最后由通用族兜底。系统栈零下载、即时渲染，网络字体保品牌气质但要配 font-display 控制闪烁，本地优先则两者之间取平衡。栈的顺序就是渲染的决策顺序。
基础搭配使用