line-height 必须设在块级元素如 p、div、li 上才生效，设在 span 或 a 上仅导致垂直偏移；body 设 line-height: 1.6 是合理起点，标题需单独设置；段落间距应使用 margin-bottom 而非 line-height；移动端需注意 text-size-adjust 和响应式行高适配。
line-height 设在哪才生效
必须设在 p、div、li 这类**块级容器**上，不能只给 span 或 a 加——它不会“撑开”整行。浏览器渲染时，line-height 决定的是该元素生成的“行框高度”，只有块级元素包裹多行文本时，这个值才真正影响视觉行距。
常见错误现象：给段落里某个词加了 span style="line-height: 2"，结果行距没变，只是那个词在行内上下偏移了。这不是行距问题，是垂直对齐问题。
-
body上设line-height: 1.6是最省事的起点，大多数文本会自然继承 - 标题（
h1–h6）要单独设，比如h2 { line-height: 1.3; }，否则容易比正文还松散 - 如果用了自定义字体，先检查其 ascent/descent 是否异常高，
line-height: 1.2可能直接导致文字截断
letter-spacing 微调中文/英文混排
letter-spacing 对中文作用有限（汉字本身不靠字距呼吸），但对英文单词、数字、标点很敏感。设太大，西文词会散架；设太小，中西文紧贴又显得拥挤。
推荐组合：
立即学习“前端免费学习笔记（深入）”；
- 正文统一用
letter-spacing: 0.02em，比px更适应缩放 - 标题可略增：
h1 { letter-spacing: 0.05em; } - 避免对
p整体设负值（如-0.5px），中文字符可能重叠，尤其在小字号下 - 如果用了 Web Font，确认字体文件是否自带 OpenType 字距调整（kerning），开了
font-kerning: auto有时比硬调letter-spacing更自然
段落间距别靠 line-height 假装撑开
line-height 控制段落**内部行与行之间**的距离；margin-bottom 才控制段落**与下一段之间**的空白。混用会导致两种问题：一是段内行距被迫拉高，二是相邻段落外边距叠加（比如两个 p 各设 margin-bottom: 1em，实际空隙变成 2em）。
干净写法示例：
article p {
line-height: 1.6;
margin-bottom: 1.2em;
}
article p:first-child {
margin-top: 0;
}
article p:last-child {
margin-bottom: 0;
}
- 只设
margin-bottom，不碰margin-top，靠父子关系自动处理首段顶空 - 用
em或无单位数值（如1.2），别用px，否则字号缩放时间距僵硬 - 如果段落中间插了
h2，:last-child失效，改用p:last-of-type更稳妥
移动端行高突变的隐蔽原因
不是 CSS 写错了，而是 viewport 缩放或系统字体设置触发了浏览器的“自动行高补偿”。尤其 iOS Safari 在启用“更大字体”辅助功能时，会强制放大 line-height 计算基数，导致原本 line-height: 1.5 的段落突然变得稀疏。
应对方式：
- 在
body或根元素加text-size-adjust: 100%（iOS 有效，Android 部分支持） - 避免在媒体查询里只改
font-size却忘了同步调line-height，比如@media (max-width: 480px) { p { font-size: 14px; } }没配行高，就可能出问题 - 真要响应式行高，用
clamp()：line-height: clamp(1.4, 1.6vw, 1.8);，但注意 IE 不支持
最常被忽略的是：line-height 的继承逻辑和字体大小变化不是线性同步的，子元素换字号后，若父级用的是 px 值，行高就卡死不动——这点在嵌套组件或富文本编辑器输出里特别容易翻车。
