CSS行高（line-height）属性用于控制文本行间距，影响文本可读性与布局，其设置方式多样：可直接使用数值（如1.5，表示1.5倍字体高度）、百分比（如150%，相对于字体大小计算）、长度单位（如20px，固定行间距）或关键字（如normal，默认值），行高具有继承性，子元素会继承父元素的行高值；若需实现文本垂直居中，可将行高设为与元素高度相等，合理设置行高能优化文本排版，避免行间距过密或过疏，提升阅读体验。
CSS行高属性详解：从基础到实践应用
在CSS中，行高（line-height） 是控制文本行间距的核心属性，它直接影响文本的可读性、页面布局的美观度，甚至元素的垂直对齐方式，无论是段落文本、标题还是表单元素，行高的合理设置都是前端开发中不可忽视的一环，本文将从行高的基础概念、语法取值、实际应用及常见问题四个维度,全面解析CSS行高属性的使用技巧。
什么是行高？为什么它很重要？
行高（line-height）指的是文本基线（baseline） 之间的垂直距离，简单理解就是"一行文字的高度"，它由三部分组成：内容区域（content area）、上半行间距（half-leading） 和下半行间距（half-leading）区域是文字的实际高度（由字体大小决定），上下行间距则均匀分布在内容区域的上下方,共同构成完整的行高。
行高的重要性体现在：
-
可读性：行高过小会导致文字拥挤，阅读费力；行高过大则会使文本松散，打断阅读节奏，正文的行高设置为字体大小的1.5~2倍时,可读性最佳。
-
布局美观：行高影响元素的高度计算（如
<p>、<div>等块级元素），合理的行高能让文本在容器中垂直居中或对齐,提升页面整体协调性。 -
垂直对齐：行高与
vertical-align属性配合，可实现文本、图片等元素的垂直居中对齐（如单行文本通过line-height: height实现垂直居中）。 -
文本溢出控制：行高设置不当可能导致文本在容器中溢出,影响页面布局的稳定性。
行高属性的语法与取值详解
行高属性可通过line-height直接设置,其语法为：
line-height: value;
value的取值类型主要有以下四种,每种类型的特点和应用场景不同：
无单位数值（推荐）
无单位数值（如5、2）是最常用的行高取值方式，表示相对于当前字体大小的倍数，若字体大小为16px，设置line-height: 1.5，则实际行高为16px * 1.5 = 24px。
特点：
- 继承时传递的是"倍数"而非计算后的固定值，适合响应式设计（字体大小变化时，行高会自动按比例调整）。
- 浏览器兼容性好,推荐用于大多数场景。
示例：
p {
font-size: 16px;
line-height: 1.6; /* 行高 = 16px * 1.6 = 25.6px */
}
长度单位（固定值）
长度单位（如px、em、rem、vh等）会设置固定的行高值,不受字体大小变化的影响。
特点：
px：固定像素值，适合需要精确控制行高的场景（如设计稿要求严格对齐）。em/rem：相对于当前字体大小（em）或根字体大小（rem），结合font-size使用时需注意计算逻辑（例如font-size: 16px; line-height: 1.5em等同于line-height: 24px）。vh：视窗高度的百分比，适合全屏布局（如标题行高设置为10vh，占视窗高度的10%）。
示例：
h1 {
font-size: 32px;
line-height: 40px; /* 固定行高40px */
}
百分比（%）
百分比表示相对于当前字体大小的百分比，计算方式与无单位数值类似（例如font-size: 16px; line-height: 150%等同于line-height: 24px）。
特点：
- 与无单位数值的区别在于：百分比继承的是计算后的固定值，而非倍数，父元素
font-size: 16px; line-height: 150%（行高24px），子元素继承的行高是24px，若子元素font-size: 20px，实际行高仍为24px（不会按比例调整）,可能导致行高比例失调。 - 百分比取值需谨慎,避免在多层嵌套的元素中使用。
示例：
.parent {
font-size: 16px;
line-height: 150%; /* 行高24px */
}
.child {
font-size: 20px; /* 继承行高24px，而非30px（20px*150%） */
}
关键字：normal
normal是行高的默认值，具体数值由浏览器决定，通常在0~1.2倍之间（例如Chrome中默认约为2）。
特点：
- 适用于需要浏览器默认行高的场景（如部分UI组件库的默认样式）。
- 但为了跨浏览器一致性，建议显式设置行高（如
line-height: 1.5）,而非依赖默认值。
行高与font属性的简写
行高可以作为font属性的简写的一部分,格式为：
font: font-size/line-height font-family;
示例：
p {
font: 16px/1.6 Arial, sans-serif;
}
行高的高级应用技巧
多行文本垂直居中
利用行高可以实现多行文本在容器中的垂直居中，当容器高度与行高相同时,文本会在容器中垂直居中显示。
.container {
height: 48px; /* 容器高度 */
line-height: 48px; /* 行高与容器高度相同 */
}
行高与文本溢出处理
超出容器时，
