CSS中line-height属性的作用与使用场景详解
在CSS排版中，line-height（行高）是最基础却又极其重要的属性之一。它不仅直接影响大段文字的阅读体验，还在各种布局技巧中扮演着关键角色。本文将深入探讨line-height属性的核心作用以及它在实际开发中的常见使用场景。
一、line-height 属性的核心作用
line-height 属性的根本作用是设置行间距，即两行文本基线之间的距离。在CSS中，一个行内元素（或行内块元素）会被分割成一行一行的“行框”，而行框的高度正是由line-height决定的。
它的核心作用可以概括为以下几点：
控制文本垂直间距：决定了段落中行与行之间的留白大小，避免文字挤在一起。
决定行内元素的高度：对于非替换行内元素（如
<span>、<a>），其渲染高度并非由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设置为相同值，即可实现文本的垂直居中。
<div class="btn">点击按钮</div>
.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即可解决。
<div class="img-box"> <img src="https://www.ipipp.com/images/demo.jpg" alt="示例图片"> </div>
.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依然是一种有效手段。通过在父容器设置一个极大的行高，并在子元素上重置行高和对齐方式来实现居中。
<div class="wrapper"> <div class="inner">多行文本内容<br>垂直居中展示</div> </div>
.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; }的良好习惯，以此作为整个页面的行高基准。