在CSS中，行高指的是文本行基线之间的垂直距离，合理控制行高能够提升文本可读性，还能实现文本垂直居中、调整段落间距等效果，下面详细介绍CSS控制行高的具体方法。
一、使用line-height属性直接控制
line-height是CSS中专门用于控制行高的核心属性，它支持多种取值方式，不同取值对应不同的适用场景。
1. 数值取值
直接写无单位的数字，该数值会乘以当前元素的字体大小得到最终行高，这种写法会继承比例，子元素会根据自身字体大小自动计算行高，是最推荐的使用方式。
/* 行高为字体大小的1.5倍 */
.text {
font-size: 16px;
line-height: 1.5;
}
/* 子元素字体为20px时，行高会自动计算为30px */
.child {
font-size: 20px;
}
2. 长度取值
使用px、em、rem等长度单位直接定义行高，这种写法行高是固定的，不会随子元素字体大小变化，适合需要固定行高的场景。
/* 固定行高为24px */
.fixed-line {
line-height: 24px;
}
/* 使用em单位，基于当前元素字体大小计算 */
.em-line {
font-size: 16px;
line-height: 1.5em; /* 最终行高为24px */
}
3. 百分比取值
百分比是基于当前元素字体大小的比例，计算方式和数值取值类似，但继承时子元素会继承计算后的固定值，而不是比例。
/* 行高为字体大小的150% */
.percent-line {
font-size: 16px;
line-height: 150%; /* 最终行高为24px */
}
4. normal取值
normal是line-height的默认值，由浏览器根据字体自动计算合适的行高，不同字体、不同浏览器的默认行高可能有差异，通常建议在项目中显式定义行高避免默认样式不一致。
/* 使用浏览器默认行高 */
.default-line {
line-height: normal;
}
二、行高的常见应用场景
1. 单行文本垂直居中
当容器高度固定时，将line-height设置为和容器高度一致，就可以实现单行文本的垂直居中，这是前端开发中非常常用的技巧。
/* 容器高度40px，行高设为40px实现单行文本垂直居中 */
.single-line-center {
height: 40px;
line-height: 40px;
text-align: center; /* 同时实现水平居中 */
}
2. 调整多行文本段落间距
对于多行文本，增大line-height可以让段落行与行之间的间距更宽松，提升长文本的可读性，通常正文内容的行高建议设置在1.5到1.8之间。
/* 正文段落行高设为1.6，提升阅读体验 */
.article-content p {
line-height: 1.6;
font-size: 16px;
}
三、注意事项
- 行高会影响行内元素和行内块元素的垂直排列，设置行高后，行内元素会在行高中垂直居中。
- 如果同时设置了height和line-height，对于多行文本，line-height只会影响行间距，不会改变容器高度，容器高度会被内容撑开。
- 继承场景下，优先选择无单位的数值取值，避免百分比或固定长度取值带来的继承问题。
需要注意的是，行高和字体大小是相关联的，调整字体大小时最好同步检查行高是否符合预期，避免出现字体变大但行高不变导致文本重叠的问题。
除了line-height属性，部分场景下也可以通过设置上下padding来调整文本的垂直间距，但这种方式本质是增加容器的内边距，和line-height控制行与行之间的间距逻辑不同，需要根据实际需求选择使用。
CSS行高line-height文本排版前端样式修改时间：2026-06-09 04:54:19