line-height 应写在包含文本的块级容器（如<p>、<div>、<li>、<body>）上，避免用于行内元素；推荐使用无单位数值（如1.6），以确保按各自font-size缩放并正确继承。
line-height 应该写在哪个 HTML 标签上？
直接写在包含文本的块级容器上，比如 <p>、<div>、<li> 或 <body>。不建议写在 <span> 或 <strong> 这类行内元素上——除非你明确想覆盖父级设置。
原因很简单：line-height 的计算依赖于当前元素的 font-size，而行内元素通常没有自己的字号（继承自父级），强行设值容易导致基线错位或行框塌陷。浏览器会按“行框（line box）”规则重新布局，一旦子元素字号不同（比如 <sup> 或 <small>），用固定单位（如 px）写的 line-height 就会失效。
- 推荐做法：在
<p>上设line-height: 1.6;，让所有子文本自然继承并按各自字号缩放 - 慎用场景：给
<span>单独设line-height: 20px;，它不会随父级字体变大而变高，可能挤占上下行空间 - 特殊需求：标题可收紧，比如
h1 { line-height: 1.2; }；长段落正文建议 1.5–1.7
为什么用无单位数字（如 1.6）而不是 px？
因为 line-height 值为无单位数字时，是相对于**当前元素自身 font-size** 计算的，且会正确继承到子元素中——子元素用自己的字号 × 该数字，得到真正适用的行高。
而 line-height: 24px; 是硬编码高度，一旦父元素字体放大（比如响应式切换到 20px），子元素若字号仍是 16px，它的行高还是 24px，就可能过紧甚至重叠。
立即学习“前端免费学习笔记（深入）”；
- 对比示例：
p { font-size: 16px; line-height: 1.5; }→ 行高 = 24px；其内<small>字号 12px → 行高自动变成 18px - 同样效果若写成
line-height: 24px;，则<small>的行高也卡死在 24px，远大于所需，造成空白浪费 - 移动端适配时，用
rem配合根字号缩放，但line-height仍优先选无单位值，避免双重缩放失控
中文排版中常见的 line-height 错误现象
最典型的是最后一行文字“被切掉一半”，尤其在 <p> 内容只有一行、且 line-height 设得偏小（如 1.1 或 12px）时。这不是 bug，而是浏览器渲染机制：行框高度由 line-height 决定，文字垂直居中对齐，上下留白均分。当行框太矮，文字本身高度超出，就会溢出底部。
- 错误写法：
<p style="line-height: 12px; font-size: 14px;">单行说明</p>→ 文字下半部分看不见 - 临时修复：加空行
<p style="line-height: 12px;"></p>，但治标不治本 - 根本解法：确保最小行高 ≥ 字体实际高度（中文一般需至少
line-height: 1.3起步），或改用padding控制容器内边距而非压榨行框 - 额外注意：不要用
height替代line-height，前者会裁剪内容；也不要用margin-bottom模拟行距，那只是视觉假象，多行时无法保证行间一致
letter-spacing 和 line-height 别混用
letter-spacing 管字间距，line-height 管行间距，二者作用域和计算逻辑完全不同。中文页面里乱设 letter-spacing: 2px; 是高频翻车点——字与字之间出现明显断裂感，阅读节奏被破坏。
- 中文默认无需调字距，
letter-spacing: normal;或不设即可；英文标题偶尔微调（0.05em～0.1em）尚可接受 - 负值如
letter-spacing: -0.03em;在英文中用于收紧，但中文极易造成笔画粘连，尤其是小字号下 - 如果目标是“让段落看起来更疏朗”，应调
line-height，不是letter-spacing；后者只影响字符水平方向，对行高毫无作用 - 检查工具：用浏览器开发者工具勾选“显示盒模型”，能直观看到
line-height影响的是整行高度，而letter-spacing只撑开字符间空隙
真正难的不是设一个值，而是理解行框怎么生成、基线如何对齐、继承如何发生。很多“看起来没问题”的样式，在嵌套不同字号或换行策略后突然崩坏，根源往往就在 line-height 的单位选择和应用层级上。
