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 会失效或表现异常，得额外处理。
