的行间距怎么设置？

line-height 是控制行距的正确CSS属性，定义基线间距，应优先使用无单位数值（如1.5），避免px/em导致响应失效或继承异常，且不可用于<br>等空标签。

line-height 设置行间距最直接

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

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

• line-height 接受无单位数值（如 1.5），推荐优先使用——它是相对于当前字体大小的倍数，响应式友好
• 避免用像素值（如 24px）设全局行高，字体大小变化时会失效
• 在 <p>、<div> 或文本容器上设置，不要写在 <br> 或空标签上（无效）

为什么用 em 或 unitless 更安全

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

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

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

• 纯数字（如 1.4）✅ 继承安全，推荐用于 body 或根元素
• em ❌ 容易固化父级计算值，慎用
• px / rem ⚠️ 仅适合固定布局或局部微调

line-height 对内联元素的影响

line-height 实际上只作用于**包含内联内容的行框（line box）**。这意味着：

• 块级元素（如 <p>）设了 line-height，其内部文字自然按该值排布
• 但若里面混有 vertical-align: top 的 <img> 或 <input>，行框高度会被拉高，可能撑开容器
• line-height: 0 可用于消除图片下方默认空白（那是基线对齐留的间隙），但别乱用在正文上

不要用 <br> 或 margin 模拟行距

有人为加大段落内行距，在每行末尾加 <br>，或给 <span> 加 margin-bottom。这会导致：

• 复制粘贴时换行符混乱
• 屏幕阅读器把 <br> 当作语义分隔，影响可访问性
• margin 会合并（margin collapse），在相邻块元素间失效
• 响应式断点切换字体大小时，硬编码的 margin 不会自适应

真要控制段落间距，用 margin-bottom 调整 <p> 之间距离；要调单行内文字疏密，只动 line-height ——职责必须分清。

最常被忽略的一点：行高生效的前提是元素有字体渲染上下文。如果父容器 font-size: 0（比如某些 Flex 居中 hack），line-height 会失效或表现异常，得额外处理。