在网页布局中，line-height 是一个非常重要但又容易被忽视的 CSS 属性。它不仅决定了文字行与行之间的垂直间距，还常用于实现单行文字的垂直居中等效果。本文将带你深入理解 line-height 的概念、作用及其常见的赋值方式。
📌 一、什么是 line-height？
line-height 表示一行文本的高度，准确地说是两条基线（baseline）之间的距离。这个高度包括了：
- 文字本身的高度；
- 上下空白区域（即所谓的“行间距”）；
✅ 常见特点：
- 如果一个元素没有设置
height，那么它的高度由line-height决定； - 容器的高度如果没有显式设定，会被内部文字的
line-height撑开； - 设置
line-height等于容器的height，可以实现单行文字的垂直居中； line-height和height都能控制元素的高度，但在多行文本场景下表现不同。
💡 二、line-height 的使用场景
| 场景描述 | 使用方式 |
|---|---|
| 单行文字垂直居中 | line-height = height |
| 控制段落行间距 | 设置合理的数值（如1.5~2） |
| 统一多行文本的视觉高度 | 结合 font-size 合理设置 |
| 实现按钮、标签等组件的垂直对齐 | 设置与容器高度一致的 line-height |
🧩 三、line-height 的赋值方式详解
line-height 支持多种赋值方式，不同的方式适用于不同的场景，也会影响子元素的表现行为。
1. 带单位赋值
（1）px：固定值
.line {
line-height: 24px;
}
- 子元素继承的是最终计算好的像素值；
- 不受子元素字体大小影响；
- 优点：精确控制；
- 缺点：不够灵活，不利于响应式设计。
（2）em：相对父级字体大小
.line {
line-height: 2em; /* 若父级 font-size 为 16px，则 line-height 为 32px */
}
- 相对于当前元素或父元素的
font-size计算； - 注意：子元素可能会因为自身字体大小而改变实际行高。
2. 纯数字（推荐方式）
.line {
line-height: 1.5;
}
- 这是一个比例值，不会直接计算出结果，而是传递给子元素后，再根据子元素的
font-size计算； - 示例：父级
line-height: 1.5，子元素font-size: 18px→ 实际行高为1.5 × 18 = 27px； - 优点：具有良好的继承性，适合模块化和响应式设计；
- 缺点：理解成本略高，需注意层级关系的影响。
3. 百分比（%）
.line {
line-height: 150%; /* 若当前元素 font-size 为 16px，则 line-height 为 24px */
}
- 百分比会基于当前元素的
font-size计算出具体值，然后传递给子元素； - 区别于纯数字：百分比计算后是绝对值，而不是比例；
- 子元素若修改了
font-size，不会影响已计算的行高。
📈 四、常见赋值方式对比表
| 赋值方式 | 示例 | 是否继承比例 | 子元素是否重新计算 | 推荐指数 | 适用场景 |
|---|---|---|---|---|---|
px | line-height:24px | ❌ 否 | ❌ 否 | ⭐⭐⭐⭐ | 固定布局、精确控制 |
em | line-height:2em | ✅ 是 | ✅ 是 | ⭐⭐⭐ | 相对布局、字体适配 |
| 纯数字 | line-height:1.5 | ✅ 是 | ✅ 是 | ⭐⭐⭐⭐⭐ | 响应式设计、模块化开发 |
百分比 % | line-height:150% | ❌ 否 | ❌ 否 | ⭐⭐⭐⭐ | 字体相关行高适配 |
🧠 五、实战技巧分享
✅ 实现单行文字垂直居中
.btn {
height: 40px;
line-height: 40px;
}
✅ 多行文本垂直居中（Flexbox）
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
✅ 兼容不同字体大小的比例行高
.text {
font-size: 16px;
line-height: 1.6; /* 所有子元素自动继承比例 */
}
