CSS中的line-height属性用于设置文本行之间的间距，也就是行高，它直接影响文本的可读性和页面的排版效果。该属性可以作用于块级元素和内联元素，是前端开发中调整文本布局的常用属性。
line-height的基本定义
line-height指的是文本行基线之间的垂直距离，基线是指文本字母底部对齐的虚拟线。对于内联元素来说，行高会围绕内容区域生成额外的空间，这部分空间会平均分配到内容区域的上下两侧。
行高的计算会结合元素的font-size属性，当line-height的取值是数值或者百分比时，最终的计算值会和font-size相关联。
line-height的常见取值
line-height支持多种取值类型，不同取值的作用逻辑有显著差异，常见的取值类型如下：
- normal：默认值，浏览器会根据字体自动设置合适的行高，通常约为字体大小的1.2倍，不同字体的normal值可能存在差异。
- 数值：比如1.5、2等，这是最推荐的取值方式。该数值会与当前元素的font-size相乘得到最终行高，并且子元素继承的是这个数值，而不是计算后的固定值。
- 百分比：比如150%、200%，百分比会基于当前元素的font-size计算出行高，子元素继承的是计算后的固定行高值。
- 长度单位：比如20px、1.5em、1rem等，直接指定固定的行高值，子元素继承的是这个固定的长度值。
不同取值的差异对比
为了更直观地理解不同取值的继承差异，我们可以通过下面的示例和表格来对比：
<div class="parent">
父元素文本
<div class="child">子元素文本</div>
</div>
/* 数值取值场景 */
.parent {
font-size: 16px;
line-height: 1.5; /* 计算行高为16*1.5=24px */
}
.child {
font-size: 20px; /* 子元素行高会变为20*1.5=30px */
}
/* 百分比取值场景 */
.parent {
font-size: 16px;
line-height: 150%; /* 计算行高为16*150%=24px */
}
.child {
font-size: 20px; /* 子元素继承的是24px固定行高，不会重新计算 */
}
/* 长度单位取值场景 */
.parent {
font-size: 16px;
line-height: 24px; /* 固定行高24px */
}
.child {
font-size: 20px; /* 子元素继承24px固定行高 */
}
| 取值类型 | 父元素font-size | 父元素行高 | 子元素font-size | 子元素继承的行高 |
|---|---|---|---|---|
| 数值1.5 | 16px | 24px | 20px | 30px（20*1.5） |
| 百分比150% | 16px | 24px | 20px | 24px（固定值） |
| 长度24px | 16px | 24px | 20px | 24px（固定值） |
line-height的常见应用场景
单行文本垂直居中
当容器的高度固定时，将line-height设置为和容器高度相等的值，就可以实现单行文本的垂直居中效果，这是该属性最经典的应用场景。
.single-line {
height: 40px;
line-height: 40px; /* 行高等于容器高度 */
text-align: center; /* 水平居中 */
border: 1px solid #ccc;
}
调整多行文本的行间距
对于多行文本，可以通过设置合适的line-height值来调整行与行之间的间距，提升文本的可读性。通常建议行高设置为字体大小的1.5到1.8倍，符合人眼的阅读习惯。
.multi-line {
font-size: 14px;
line-height: 1.6; /* 行高为14*1.6=22.4px */
width: 300px;
border: 1px solid #ccc;
}
内联元素的垂直对齐调整
内联元素（比如<span>、<img>）的垂直对齐会受到行高的影响，当多个内联元素在同一行时，行高会决定整行的高度，进而影响元素的对齐表现。
注意事项
- line-height不会影响替换元素（比如<img>、<input>）的内容高度，但会影响替换元素所在的行框高度。
- 当line-height的取值小于font-size时，文本内容可能会出现重叠的情况，实际开发中要避免这种设置。
- 如果使用长度单位设置line-height，在响应式布局中如果字体大小发生变化，行高不会自动适配，因此优先推荐使用数值类型的取值。
总结：line-height是控制文本行高的核心属性，理解不同取值的继承规则是正确使用该属性的关键，数值类型的取值因为继承的是比例值，适配性更好，是实际开发中的首选。
line_heightCSS行高文本排版修改时间：2026-06-16 03:03:14