1. 1.概念与排版基础
1.1 行高的定义与作用
在网页排版中，line-height 控制的是每行文本的基线之间的距离，也决定了文本行盒子的高度。合理的行高能让文字在垂直方向上拥有均匀的节奏，从而降低眼睛疲劳并提升可读性。
如果行高过小，文本显得拥挤，段落之间的间距不足；如果行高过大，段落之间的视觉断裂会削弱连贯性。 设计时应以可读性为核心，兼顾整体排版的平衡性。
1.2 行高的单位与继承特性
行高可以使用数字、长度单位或百分比等不同单位。以数字值为单位时，line-height 与字体大小成比例，有利于响应式设计的一致性。
此外，行高是可继承的，子元素会沿用父元素的行高，帮助保持文本块的整体节奏，减少逐层覆盖的微调需求。
2. 2.最优行高区间的原则
2.1 面向文本的可读性原则
对于大多数正文文本，常见的推荐区间在 1.4–1.8 之间，其中 1.5 左右通常被认为是对中文与英文字母混排的稳妥选择。可读性与视觉舒适度是评估是否符合要求的核心。
在段落内，紧凑文本倾向于较小区间，而教育类或技术类内容则可能需要略高的行高以缓解长时间阅读的疲劳。
2.2 与字体设计的关系
不同字体的字形、笔画粗细和字重都会影响实际的视觉高度，因此要结合具体字体进行微调，避免盲目套用统一数值。
在高分辨率屏幕上，同一数值的行高也可能呈现不同的视觉效果，需要通过实际排版呈现来确认是否达到理想的可读性。
3. 3. 实践指南：前端排版中的行高设置策略
3.1 标准文本段落的行高设置
通常把正文段落的 行高设定为 1.5–1.7，与字体大小成比例地自适应。这样既能保证段落的连贯性，又不会让行距显得松散。
在实现时，优先使用相对单位（如 1.6、1.5 等数字值），以便随着根字体大小的变化而自动调整。
:root {--base-font-size: 16px;--line-height: 1.6; /* 与字体尺寸成比例，便于响应式调整 */
}
html { font-size: 100%; }
body { font-size: var(--base-font-size); line-height: var(--line-height); }
p { margin: 0 0 1.125em; }
3.2 标题、列表和代码块的特殊处理
标题通常需要比正文略紧凑的行高，以便在视觉上形成明确的层级。代码块和带有断行的文本区应使用更小的行距或独立的行高，以避免垂直穿透感。
在实际项目中，不同元素应设定各自的行高变量，通过 CSS 变量统一管理，确保全局一致性与局部微调的灵活性提升。
4. 4. 响应式与无障碍：适配不同设备
4.1 移动端的行高调整
在小屏设备上，文本行数往往增加，适度提高行高可以提升可读性，同时避免指尖滑动时发生误操作造成的阅读中断。
结合媒体查询，将 行高与屏幕尺寸和字体缩放要素绑定，实现跨设备的一致视觉体验。
@media (max-width: 600px) {html { font-size: 15px; }body { line-height: 1.65; }
}
4.2 高DPI与浏览器差异
不同浏览器对默认字体渲染和行高的处理存在微小差异，因此要通过 跨浏览器测试 来确认实际渲染效果。
对抗这类差异的办法包括：统一字体族、避免仅用像素值来控制间距、使用相对单位与 CSS 变量实现统一控制。
5. 5. 常见问题排错与技巧
5.1 如何快速判断行高是否合适
判断要点包括 可读性、段落紧密度、文本的垂直节奏，以及在多行文本中是否出现过度空行或拥挤感。
一种实用的方法是对比两组排版：一组行高偏低，一组偏高，选取在实际阅读场景中更易于持续阅读的那一组。
5.2 行高与字体大小的联动
在字号调整时，确保 line-height 仍保持相对比例，避免字号变化导致阅读体验波动。
同时，尽量避免将行高固定为绝对值，使用相对数值或变量驱动可提升维护性和响应式表现。
6. 6. 实战对比：不同场景的行高设置
6.1 文章页面的行高设置
文章内容应强调可读性与长文本的连贯性，因此常用 1.65–1.75 的行高，并配合合适的段落间距。
通过对比可以看到，稍高的行高有助于长篇阅读的舒适度，而段落之间的分隔也更清晰。
article { font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 18px; line-height: 1.72; }
article p { margin: 0 0 1.5em; }
article h2, article h3 { line-height: 1.2; }
6.2 列表与代码块的行高对比
对于无序列表和有序列表，统一的行高有助于列表的整齐感，而代码块通常需要更紧凑的行高以适应等宽字符的展示。
在实现中，可以将 列表的 line-height 设置为 1.6，而将 代码块的 line-height 设置为 1.4，以维持视觉对比和可读性。
核心问题是：CSS行高设置到底怎么做才最优？前端排版优化全攻略，通过上面的对比和要点，可以在不同场景下调整到最符合实际阅读体验的值。
