CSS line-height 详解：从排版优化到垂直居中的核心属性与应用技巧

CSS中line-height属性的作用与使用场景详解
在CSS排版中，line-height（行高）是最基础却又极其重要的属性之一。它不仅直接影响大段文字的阅读体验，还在各种布局技巧中扮演着关键角色。本文将深入探讨line-height属性的核心作用以及它在实际开发中的常见使用场景。

一、line-height 属性的核心作用
line-height属性的根本作用是设置行间距，即两行文本基线之间的距离。在CSS中，一个行内元素（或行内块元素）会被分割成一行一行的“行框”，而行框的高度正是由line-height决定的。

它的核心作用可以概括为以下几点：

控制文本垂直间距：决定了段落中行与行之间的留白大小，避免文字挤在一起。
决定行内元素的高度：对于非替换行内元素（如、），其渲染高度并非由height决定，而是由line-height决定。
影响垂直对齐：line-height与vertical-align配合使用时，是控制行内元素垂直对齐方式的基础。
二、line-height 的取值机制
理解line-height的不同取值方式，是灵活运用它的前提。常见的取值包括：无单位数字、长度值（px, em）和百分比。

.box-1 { line-height: 1.5; } /* 无单位数字：推荐写法，子元素继承的是比例 1.5 /
.box-2 { line-height: 24px; } / 固定长度值：子元素继承的是计算后的 24px /
.box-3 { line-height: 1.5em; } / em相对单位：基于当前元素font-size计算，继承计算后的值 /
.box-4 { line-height: 150%; } / 百分比：基于当前元素font-size计算，继承计算后的值 */
重点注意：使用无单位数字（如1.5）是业界推荐的最佳实践。当父元素设置line-height: 1.5时，子元素会继承这个“1.5”的比例，然后根据自身的font-size重新计算行高，从而避免子元素字体大小与行高不匹配导致的文字重叠问题。

三、line-height 的典型使用场景

1. 优化大段文字的阅读体验
   在文章详情页或新闻列表中，合适的行高能让用户阅读起来不费眼。通常，中文正文内容的行高建议设置在1.5到1.8之间。

.article-content {
font-size: 16px;
line-height: 1.75; /* 16 * 1.75 = 28px，行间距舒适，适合长文阅读 */
color: #333;
}
2. 单行文本垂直居中
这是line-height最经典的布局场景之一。当一个容器只包含单行文本时，只需将容器的height和line-height设置为相同值，即可实现文本的垂直居中。

点击按钮

.btn { width: 120px; height: 40px; line-height: 40px; /* 行高与高度一致，实现垂直居中 */ text-align: center; /* 水平居中 */ background-color: #007bff; color: #fff; border-radius: 4px; cursor: pointer; } 3. 修复图片底部3px间隙问题 在布局中，将图片放在div容器内时，图片底部往往会出现几像素的空白间隙。这是因为图片默认是基线对齐，而行框为了容纳文本的“下沉部分”保留了空间。此时，将父容器的line-height设置为0，或图片设置vertical-align: middle/bottom即可解决。

.img-box { line-height: 0; /* 消除行框底部的预留空间，去除图片底部间隙 */ font-size: 0; /* 配合使用，彻底清除因字体行高产生的间距 */ border: 1px solid #ccc; }

/* 或者直接在图片上设置 /
.img-box img {
vertical-align: bottom; / 改变对齐方式，脱离基线对齐 */
}
4. 配合 vertical-align 实现多行文本或行内块垂直居中
虽然现代开发中我们常使用Flexbox进行居中，但在兼容老项目或特定行内排版时，line-height配合vertical-align: middle依然是一种有效手段。通过在父容器设置一个极大的行高，并在子元素上重置行高和对齐方式来实现居中。

多行文本内容
垂直居中展示

.wrapper { width: 300px; height: 200px; line-height: 200px; /* 行高等于容器高度 */ background-color: #f5f5f5; text-align: center; }

.inner {
display: inline-block;
line-height: 1.5; /* 重置子元素行高，避免继承父元素的巨大行高 /
vertical-align: middle; / 垂直居中对齐 */
text-align: left;
}
四、总结
line-height虽然是一个看似简单的CSS属性，但它在CSS排版体系中起着承上启下的作用。掌握line-height的无单位继承机制，能帮我们规避许多排版Bug；而熟练运用它在文本行距、垂直居中、间隙修复等场景，则能大幅提升我们的页面重构效率与代码质量。在开发中，建议养成全局设置body { line-height: 1.5; }的良好习惯，以此作为整个页面的行高基准。

来源：https://www.ipipp.com/html/20260422/596.html