CSS line-height 的作用与原理
定义与计算规则
line-height 是 CSS 中用来控制文本行之间垂直间距的属性。通过设置行高，可以有效影响整段文本的视觉密度与可读性。对于网页排版而言，合适的行高能够提升段落的可读性，减少读者在阅读时的眼睛疲劳。
在计算上，line-height 可以取一个无单位的数字、一个带单位的长度值、或者一个百分比。无单位数值表示行高是字体大小的放大倍数，具有随字体缩放而自动调整的特性，适用于响应式设计。
需要注意的是，不同浏览器对 line-height 的默认值处理略有差异，但现代浏览器通常会遵循规范，以块级元素的内容框架高度为基准进行计算。
与字体大小的关系
对于同一文本区域，line-height 的值等于 font-size 的乘积，再适配浏览器的布局模型，这一点对于在不同设备上保持一致的垂直节奏尤为重要。
当使用单位无关的数字值时，行高会随字体大小的变化而自动缩放，从而保持相对间距的一致性，尤其在响应式布局中表现突出。
如果将 line-height 设置为一个固定像素值，则不随字体大小变化，可能在较大或较小屏幕上出现文本拥挤或过于稀疏的情况，因此在自适应设计中要谨慎使用。
在文本排版中的使用场景
网页正文的可读性优化
在网页正文中，较舒适的行距通常落在 1.4 到 1.8 之间的区间，具体取值要结合字体、字号和段落长度来微调。合理的行高可以让读者的眼睛在段落之间更自然地回到下一行，而不会产生跳跃感。
为了适应多种用户场景，将 line-height 设为单位无关数值，并在不同字体大小下保持相对比例，是提升可读性的常见做法。
在实现时，应避免将行高设得过小，避免行与行之间的重叠，也不要设置过大导致段落显得松散，影响整体排版的密度感。
多列布局与行高的协同
在多列文本或分栏布局中，统一的行高能确保不同列之间的对齐美感，避免出现视觉错位的问题。
当文本跨越多列时，保持一致的 line-height 可以使分栏之间的视觉节奏更加稳定，提升整体排版的专业感。
如果页面采用响应式设计，在较小设备上适度增大行高，可以缓解拥挤感，提升单列阅读的舒适度。
单位选择与跨设备的一致性
无单位数字行高的特性与应用
使用无单位的数字作为 line-height，如 line-height: 1.6;，表示行高是当前字体大小的倍数。这种做法最大的优点是随字体大小自适应，在响应式设计中尤为方便。
在响应式布局中，当屏幕尺寸变化、用户放大字体时，无单位数字的 line-height 能保持相对比例，避免手动调整各断点的数值。
尽管无单位数值有优点，但在某些极端场景下，为了实现极致的排版控制，也可以结合媒体查询对不同断点设定具体的像素或百分比行高。
相对单位的优势（em、rem、%）
使用相对单位的行高，可以让排版在不同的根字号下保持一致的视觉效果，这是跨设备设计的一种稳妥做法。
其中，rem 单位以根元素字号为基准，在根字号发生变化时，整站文本的行高会随之统一调整，简化了全局风格管理。
百分比也常被用于将行高与字体大小绑定，如 line-height: 120%，它同样具备随字体变化而自适应的特性，但需要在设计系统中保持一致性以避免意外的排版差异。
可访问性与用户偏好
提升无障碍阅读体验
对需要辅助技术的用户而言，清晰且稳健的行高是无障碍阅读的重要组成，能够降低视觉疲劳并提升文本的辨识度。
在实现层面，尽量避免强制性极小的行距，并提供足够的纵向空间，让屏幕阅读器和视觉浏览工作者更易解析段落结构。
结合设计系统，默认行高应兼顾常见字体与不同语言文本（如中文、英文、拉丁文字）的排版需求，以减少跨语言版本的排版差异。
结合响应式设计与用户偏好
现代浏览器支持用户偏好设置如 prefers-reduced-motion，但它并不直接控制 line-height，仍然可以通过设计保持可读性。在响应式断点中根据设备特性微调行高，有助于稳定的阅读体验。
对于可定制的主题或无障碍主题，将 line-height 纳入全局可配置项，用户可以按需调节，满足不同阅读习惯。
在实现代码层面，保持 CSS 的层级简洁与可覆盖性，便于在高对比度模式或自适应字号场景下进行快速替换。
实践中的 CSS 示例与技巧
常见场景的快速落地代码
下面给出几个常见场景的落地代码，帮助你快速在项目中实现更好的文本排版。通过 单位无关数值、根字体统一、以及简洁的层级结构，可以实现稳定且易维护的排版效果。
/********* 基础正文 *********/
html { font-size: 16px; } /* 根字号 */
body { line-height: 1.6; } /* 单位无关数值，适配不同字号 */
p { margin: 0 0 1em; }/********* 标题与段落的区分 *********/
h1, h2, h3 { line-height: 1.2; }
section { padding: 1rem 0; }/********* 适配移动端 *********/
@media (max-width: 768px) {html { font-size: 15px; }body { line-height: 1.7; }
}
在上面的示例中，根字号统一、段落之间的垂直间距统一，配合无单位行高，使排版在不同设备和浏览器中保持一致性。
对比演示：单位不同的行高效果
通过下述对比，可以直观感受到不同单位对排版的影响。请注意，实际效果会随字体、字号和设备而变化。
/***** 单位无关数值 vs 固定单位 *****/
p.unitless { line-height: 1.6; } /* 单位无单位，随字体放大缩小 */
p.px { line-height: 26px; } /* 固定像素高度，随字体大小可能显得不协调 */
p.percent { line-height: 150%; } /* 百分比，保持相对比例 */
/***** 真实效果在实际页面中查看 *****/
实践要点：优先使用单位无关数值，可以让全局排版更具韧性；在特定视觉风格需求下再结合固定单位进行微调。
结合设计系统的落地策略
在系统化的设计中，建立统一的行高尺度（LineHeight Scale），如将 1.2、1.4、1.6、1.8 等级映射到不同组件，确保跨页面的一致性。
此外，把 line-height 纳入可变文本策略，例如在组件级别允许通过变量控制行高，简化主题切换和无障碍模式的实现。
通过对比、测试与迭代，可以逐步锁定最适合你网站的默认行高区间，从而提升整体的可读性和专业感。
