在网页排版中，行高对可读性和视觉节奏至关重要。本指南围绕 CSS 的 行高属性 调整展开，从基础概念到实践设置，帮助前端开发者在不同场景中做出更合理的排版决策。
理解行高的基本概念
行高的定义与继承性
在 CSS 中，line-height 定义了行框的高度，即文本行之间的垂直空间基准。它直接影响文本的阅读舒适度和段落的整体密度。该属性具有继承性，子元素通常会继承父元素的计算值，除非显式覆盖，从而保持整篇文档的纵向节奏一致。
需要明确的是，line-height 不等同于可视上的两行之间的“间距”，它更多地决定了行框的高度，从而影响行内对齐和行盒之间的距离。字体、字号以及字重等因素会对最终呈现产生共同作用。
为了帮助理解，可将基础设置应用到段落和标题上，观察在不同字体下行高如何影响行间空白与边界感。以下示例展示了基本的继承与效果：
/* 基础示例：继承与可视效果 */
body { font-family: system-ui, Arial; line-height: 1.5; }
h2 { font-size: 2rem; }行高的单位与取值类型
单位的差异：unitless 与像素/em/rem
行高的取值可以是无单位（unitless）或带单位的长度值（如 px、em、rem）。两者在计算和继承上存在差异，影响到跨元素的一致性与可预测性。
当使用unitless 的 line-height 时，浏览器会将该数值乘以元素的字体大小来得到实际的行高，因此在不同元素之间能保持比例关系，特别适合响应式设计与可维护性。
带单位的行高则是一个确定的长度值，对应一个具体的物理高度。它在组件化设计中有利于对齐固定元素，但可能在字体缩放或父元素字体变化时产生非线性影响，因此需要在全局设计中保持一致性。
/* unitless 使用示例 */
p { line-height: 1.5; }
/* px/ em / rem 的示例 */
.section { line-height: 22px; }
.article { line-height: 1.8em; }在响应式设计中的行高调整
如何在不同屏幕和设备上保持可读性
在响应式设计中，可读性是首要目标，因此行高需要随着字体大小、设备宽度变化而保持合理的视觉节奏。推荐通过相对单位和灵活的表达来实现自适应。
一个实用的思路是结合容器字体大小的变化，使用可随视口变化的线性关系来计划行高。同时，使用 CSS 变量和函数（如 clamp、calc）可以让不同断点下的行高更平滑地过渡。
下面的示例展示了在移动端到桌面端之间的平滑调整方法，优先保持文本的横向密度与纵向节奏的一致性：
/* 响应式行高：使用 clamp 实现平滑过渡 */
p { line-height: clamp(1.3, 1.2vw + 1.0rem, 1.8); }
/* 也可以对标题与正文使用不同的 line-height，以维持节奏 */
h1 { line-height: 1.15; }常见坑点与调试技巧
断行与垂直对齐问题
在实际开发中，图片、图标、emoji 等内嵌元素可能会因行高的设定而出现对齐偏差，导致视觉不一致。此时需要对相关元素进行单独的对齐处理或将其设为独立的行盒子。
一个常见的做法是对内嵌对象设置显式的对齐属性，并必要时调整其高度与基线对齐关系，以实现整段文本的垂直一致性。对于文本周围的边距，尽量避免用大量固定像素值来硬性拉开间距。
调试时，可以在浏览器开发者工具中查看计算出的 line-height 值、对应的行框高度，以及实际渲染中的行距效果，从而快速定位问题并进行修正。
/* 常见坑点：图片和 emoji 的对齐 */
img.icon { vertical-align: middle; line-height: 1; }
/* 调试：高亮显示计算后的行高以观察效果（示意性写法） */
* { outline: 1px solid rgba(0,0,0,.0); }另外，可访问性与可读性是设计行高时不可忽视的要素。适当的行高有助于屏幕阅读器的逻辑流畅性，并降低用户在长文本中的疲劳感。确保在不同浏览器和辅助技术中测试文本的可读性，以避免因为行高设置导致的阅读障碍。
/* 提升可读性：确保正文区域的行高在合理区间 */
main { line-height: 1.6; }
a { line-height: 1.5; }
.blockquote { line-height: 1.8; }