CSS行高属性用于控制文本行与行之间的垂直间距，是文本排版场景中经常用到的样式属性，合理设置行高可以提升页面的可读性和美观度。
行高属性的基本定义
CSS中行高对应的属性名是line-height，它定义了文本行基线之间的距离，基线是指大部分字母底部对齐的那条虚拟线。行高的取值会直接影响文本行的实际高度，当行高大于字体大小时，文本行之间会出现额外的间距。
line-height的常见取值方式
line-height支持多种取值类型，不同取值方式的计算规则有所区别，常见的取值方式如下：
- 数值：直接写数字，比如
line-height: 1.5，行高会等于当前元素的字体大小乘以这个数值，例如字体大小是16px，行高就是24px。这种取值方式会被子元素继承数值，子元素会根据自身的字体大小重新计算行高，是推荐的使用方式。 - 长度单位：使用px、em、rem等单位，比如
line-height: 24px，行高固定为24px，子元素会直接继承这个固定的行高值，不会根据自身字体大小调整。 - 百分比：比如
line-height: 150%，行高等于当前元素字体大小乘以百分比，子元素继承的是计算后的固定行高值，和长度单位的表现一致。 - normal：默认值，由浏览器根据字体自动计算行高，不同字体的normal值会有差异，通常在1.2左右。
行高属性的典型应用场景
单行文本垂直居中
当容器高度固定，内部只有单行文本时，设置line-height等于容器高度，就可以实现文本垂直居中，不需要额外使用flex等布局方式。
/* 容器高度40px，单行文本垂直居中 */
.text-container {
height: 40px;
line-height: 40px;
font-size: 14px;
border: 1px solid #ccc;
}
多行文本调整行间距
对于多行文本，设置合适的行高可以提升阅读体验，一般正文内容的行高建议设置在1.5到1.8之间，避免行间距过密或过疏。
/* 正文段落行高设置 */
.article-content p {
font-size: 16px;
line-height: 1.6;
/* 行高计算为16*1.6=25.6px */
}
使用行高属性的注意事项
- 行高继承规则：如果使用数值取值，子元素继承的是数值，会根据自身字体大小重新计算行高；如果使用长度单位或百分比，子元素继承的是计算后的固定值，不会重新计算。
- 行高和字体单位搭配：如果使用em单位设置行高，要注意em是相对于当前元素的字体大小，避免嵌套场景下出现行高计算不符合预期的问题。
- 行高对行内元素的影响：行高会影响行内元素（比如<span>）的垂直排列，即使行内元素本身没有设置行高，也会受父元素的line-height影响。
常见问题解答
问：设置line-height后文本没有垂直居中怎么办？
首先检查容器是否是单行文本，多行文本用line-height等于容器高度的方式无法实现整体垂直居中；其次检查是否设置了正确的字体大小，行高的计算依赖字体大小，如果字体大小被其他样式覆盖，行高计算会不符合预期。
问：为什么行高设置成1.5比设置成24px更好？
因为数值取值具有更好的响应性，当用户调整浏览器默认字体大小时，使用数值的行高会自动跟随字体大小调整，而固定px值的行高不会变化，可能导致文本重叠或者间距异常。
CSSline_height行高文本排版修改时间：2026-07-01 15:12:26