HTML怎么做行距调节_html网页行距大小调节功能(参考)

作者：袖梨 2026-07-19

行距调节必须用CSS的line-height属性设在包含多行文本的块级容器（如p、div）上，不可用于span等内联元素；应使用无单位数值（如1.6），避免px或%导致继承失效；段落间距则需用margin控制，与line-height作用对象不同。

行距调节不是靠 HTML 标签或属性实现的，所有可控、可维护的行距调整都必须用 CSS 的 line-height —— 用错地方（比如改 margin 或堆 <p>）只会让结构混乱、响应式失效、读屏器误读。

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，大多数文本元素会自然继承，减少重复声明

段落之间空隙 ≠ 行距，别混用 margin 和 line-height

line-height 控制的是**段内行与行之间的距离**；margin-top/margin-bottom 才控制**段与段之间的空白**。浏览器默认给 p 加了约 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 不支持，需降级处理