HTML行间距设置技巧详解

本文深入解析了HTML中设置行间距的正确方法，明确指出HTML本身并无行间距属性，真正起效的是CSS的`line-height`——它定义的是基线到基线的距离，而非字距或段距；文章强调应优先使用无单位数值（如1.5）以确保响应式兼容与安全继承，严厉警示滥用`px`、`em`、`margin`或`
`模拟行距所引发的布局错位、可访问性受损、继承异常及响应失效等典型问题，并揭示了`line-height`对内联元素、空标签及字体上下文的隐含依赖，为开发者提供清晰、可靠、语义合规的排版实践指南。

line-height 设置行间距最直接

HTML 本身没有“行间距”属性，真正起作用的是 CSS 的 line-height。它控制的是**一行文字的基线到下一行基线之间的距离**，不是字与字之间的空隙，也不是段落间的空白——这点常被误解。

常见错误是用 margin 或 padding 模拟行距，结果导致段落间错位、列表项对不齐，或者内联元素（如 ）行为异常。

• line-height 接受无单位数值（如 1.5），推荐优先使用——它是相对于当前字体大小的倍数，响应式友好
• 避免用像素值（如 24px）设全局行高，字体大小变化时会失效
• 在

  、

  或文本容器上设置，不要写在
或空标签上（无效）

为什么用 em 或 unitless 更安全

比如 line-height: 1.6 表示“当前 font-size 的 1.6 倍”，子元素继承后仍基于自身字号计算；而 line-height: 1.6em 会继承父级计算后的固定值，容易导致嵌套文本行高塌陷。

典型翻车场景：导航菜单里 套 ，用了 1.6em 后子元素行高变小、文字贴顶。