HTML行距调节：网页行距大小设置方法

行距调节是网页排版中的基础操作，这一功能必须通过CSS的 line-height 属性来实现，并且需要在正确的元素上使用。依靠修改 margin 或堆叠

标签来模拟行距，不仅会破坏页面结构，还会导致响应式布局失效，并影响读屏器对内容的正常解析。

line-height 应该设置在哪个元素上才能生效

核心结论很明确：line-height 必须设置在**包含多行文本的块级容器**上，例如 p、div、li、blockquote 等。如果试图给 span 或 a 这类内联元素单独设置 line-height 来撑开段落间距，是无效的。它只影响元素自身在行框内的垂直对齐，通常用于按钮文字居中，但无法解决段落的行距问题。

• 正确做法：给 p 设置 line-height: 1.6，整段文字换行后行距统一且整齐。
• 错误做法：给 span 设置 line-height: 2，期望它撑开父段落——无效。
• 需要注意：h1–h6 标题标签自带默认 line-height，若未显式重置，其行高可能与正文不一致，导致整体排版显得跳跃。

推荐使用无单位数值（如 1.6）而非 px 或 %

这是容易踩坑的地方。正确的写法是 line-height: 1.6，这是一个相对于当前元素 font-size 的倍数。子元素字体变大时，行高会自动按比例放大，保持流畅。而 line-height: 24px 或 line-height: 160% 是固定值，一旦子元素字号变化，行高不会随之调整，容易出现文字重叠或间距断层。

• 中文正文推荐 line-height: 1.5 到 1.8，标题可以适当紧凑（1.2 到 1.4）。
• 注意：line-height: 150% 看似与 1.5 等价，但继承的是计算后的绝对值，不会根据子元素字号重新计算，本质上仍是固定值。
• 省力技巧：在 body 上设置 line-height: 1.55，大多数文本元素会自然继承，减少重复声明。

举个例子：给 body 设置 line-height: 1.55，正文

的字号为 16px，行高为 24.8px；如果内部有一个 字号为 24px，由于继承的是无单位数值，行高自动变为 37.2px。如果使用 line-height: 160%，即使 字号变大，行高仍然基于 16px 计算为 25.6px，文字就会重叠。

段落间距与行距不同，不要混用 margin 和 line-height

这一点十分重要：line-height 控制的是**段内每行之间的垂直距离**，而 margin-top 和 margin-bottom 才真正管理**段落之间的空白区域**，两者功能不同。浏览器默认给

添加了约 1em 的上下外边距，若觉得段间距不合适，应直接覆盖 margin，而不是通过拉高 line-height 来模拟段距。

立即学习“前端免费学习笔记（深入）”；

• 统一段间距：使用 p { margin: 0.8em 0; }，简洁清晰。
• 首段去顶边距、末段去底边距：使用 p:first-child { margin-top: 0; } 和 p:last-child { margin-bottom: 0; }，让首尾段落紧贴容器边缘。
• 在 Flex 容器中，可以用 gap 替代 margin 管理间距，但需注意 IE 不支持 gap，需要做好降级处理。

调试时如何确认 line-height 已生效

行高用肉眼较难判断是否按预期工作。以下几种方法可以帮助确认：

• 给目标元素临时添加 border: 1px solid red 或 background-color: rgba(0,0,0,0.1)，可以清晰看到其行框范围。
• 打开浏览器开发者工具，选中元素，在 Styles 面板中查看 line-height 是否被正确计算并应用，注意是否有更高优先级的规则覆盖。
• 检查是否存在 overflow: hidden 或使用了非标准字体，导致文字被意外截断。此时调大 line-height 可能会暴露底层的渲染问题。

真正关键的不是设置一个数值，而是理解 line-height 的本质是控制“行框高度”，而非“两行基线之间的距离”。它还与 font-size、vertical-align、容器 display 类型密切相关。稍有不慎，就可能出现文字重叠、首行缩进失效、Flex 布局中不生效等问题。掌握原理后，才能灵活运用。