HTML行间距如何设置

许多刚接触网页布局的新手经常问：“如何为文字增加行间距？”首先需要澄清一个常见误区：HTML本身并没有名为“行间距”的属性。真正控制文字行与行之间距离的，是CSS中一个关键且经典的属性——line-height。

它控制的是从一行文字的基线到下一行基线之间的距离。请注意，这不是字与字之间的空隙，也不是段落之间的空白，很多人容易混淆这两个概念。在实际开发中，有人尝试用margin或padding来模拟行距，结果往往导致段落错位、列表对不齐，甚至等内联元素也会出现偏移。归根结底，这些方法并不正确。

接下来，我们将阐明几个关键原则。

line-height 设置行间距，最直接且正确

回到主题，line-height 是唯一正确的工具。

• line-height 可以接受无单位数值，例如 1.5。这种写法最为推荐——它会基于当前字体大小自动计算倍数，响应式布局完全适用。
• 尽量避免使用像素值（如 24px）设置全局行高。一旦字体大小发生变化，这个固定值就会失效，不仅无法同步调整，还可能导致文字重叠。
• 应将 line-height 设置在
  、
  或文本容器上。不要写在
或空标签上，那样没有意义，也不会生效。

  为什么使用 em 或无单位数值更安全

  举个例子：line-height: 1.6 表示“当前 font-size 的 1.6 倍”。如果子元素继承了这条规则，它会根据自身的字号进行计算，非常灵活。

  但如果写成 line-height: 1.6em，情况就不同了。子元素继承的是父元素计算后的固定值。一旦嵌套层级加深，子元素的行高就可能“塌陷”——完全偏离预期效果。

  一个典型的翻车场景：导航菜单中 内嵌 ，使用了 1.6em，结果子元素的行高变小，文字直接贴顶。这就是父级计算值被固化的后果。

  • 纯数字（如 1.4） 继承安全，强烈推荐在 body 或根元素上使用。
  • em 容易固化父级计算值，需谨慎使用。
  • px / rem 仅适用于固定布局或局部微调，全局应慎用。

  line-height 对内联元素的影响

  必须了解的一点是：line-height 实际上只作用于包含内联内容的行框。这意味着什么？

  • 块级元素（如
    ）设置 line-height 后，其中的文字自然按此值排列。
  • 但如果内部混入了 vertical-align: top 的 或 ，行框高度可能被拉高，进而撑开容器。这是许多布局问题的根源。
  • line-height: 0 可用于消除图片下方默认的空白——那是基线对齐留下的间隙。但切勿在正文中使用，否则文字会挤成一团。

  不要用
  或 margin 模拟行距

  有些开发者为了加大行距，在每行末尾添加
，或给 添加 margin-bottom。这些都属于不良习惯。

  • 复制粘贴时，换行符会变得混乱，用户复制的内容可能格式错乱。
  • 屏幕阅读器会将
视为语义分隔，严重影响可访问性。
  • margin 会发生合并（margin collapse），在相邻块元素间失效。
  • 响应式断点切换字体大小时，硬编码的 margin 不会随之调整。

  正确的做法是：要控制段落之间的距离，使用 margin-bottom 调整

  之间的空白；要调整单行内文字的疏密，只需使用 line-height。职责必须明确分开。

  最后提醒一个容易忽略的细节：行高生效的前提是元素必须有字体渲染上下文。如果父容器设置了 font-size: 0（例如某些 Flex 居中技巧），那么 line-height 会失效或表现异常。使用时需特别注意。