行高属性
最后更新：2026-09-13
line-height 行高属性
line-height 用于设置文本行与行之间的垂直间距，即行高。合适的行高能显著提升长文的可读性，通常取字号的 1.5 倍左右。
| 分类 | |
|---|---|
| 初始值 | normal |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | number |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
line-height: normal | <number> | <length> | <percentage>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
normal | 关键字 | 默认行高（约 1.2） |
<number> | 类型 | 倍数行高，如 1.5 |
<length> | <percentage> | 类型 | 固定行高值 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| line-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 推荐使用无单位数值（如 1.5），它会随字号等比缩放，继承行为更可预测。
重要： 无单位数值与百分比在继承上有差异：数值被子元素继承，百分比则按父元素字号计算后固定。
❓ 常见问题
Q单行文字怎么垂直居中？
A把 line-height 设为与容器高度相等即可，如 height: 40px; line-height: 40px，单行文本就会垂直居中。但多行文本会溢出，此时应改用 Flexbox 的 align-items: center。
Q行高设多大合适？
A正文建议 1.5~1.8 倍字号，长文取 1.7~1.8 更易读；标题可紧凑些（1.2~1.4）；代码块常用 1.4~1.6。移动端由于屏幕窄，行高通常要略高于桌面端。
Qline-height: 1.5 和 line-height: 150% 有什么区别？
A关键在继承：无单位数值 1.5 是倍数，子元素按自己的字号计算行高，行为可预期；百分比 150% 会在父元素处按字号算成固定像素值再继承，子元素字号变化时行高不会跟着变，容易出问题。
🏷️ 相关属性
💡 相关案例
📚 相关教程
