HTML行间距如何设置
来源：互联网 2026-07-17 07:46:19许多刚接触网页布局的新手经常问：“如何为文字增加行间距？”首先需要澄清一个常见误区：HTML本身并没有名为“行间距”的属性。真正控制文字行与行之间距离的，是CSS中一个关键且经典的属性——line-height。 它控制的是从一行文字的基线到下一行基线之间的距离。请注意，这不是字与字之间的空隙，也不
许多刚接触网页布局的新手经常问：“如何为文字增加行间距？”首先需要澄清一个常见误区：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会失效或表现异常。使用时需特别注意。 - 纯数字（如