line-height设无单位数字（如1.5）最稳妥，因其相对当前font-size自动缩放，避免继承塌陷或溢出；影响行框高度而非字体大小，需配合font-size调整以保持视觉节奏。
用 line-height 控制行高，不是 margin 或 padding
直接改 line-height 是最稳妥的方式。它作用于行框（line box），影响的是文字基线之间的距离，不会意外撑开父容器或破坏内联布局。很多人误用 margin-bottom 给 <p> 加间隙，结果段落间空太大、首尾不一致，还可能和垂直对齐逻辑冲突。
常见错误现象：
– 文字贴在一起像挤成一团
– 某些字体（如思源黑体、Noto Sans）默认行高偏小，尤其在 font-size: 14px 时明显发闷
– 用 padding 模拟行距，导致点击区域变大、响应式错位
-
line-height可以是无单位数值（推荐），例如line-height: 1.6;—— 表示基于当前font-size的倍数，继承安全、缩放友好 - 避免用带单位的值（如
line-height: 24px;），否则子元素字体变大时行高卡死不动 - 全局设置建议写在
body或:root，比如body { line-height: 1.5; }
不同选择器下 line-height 的行为差异
line-height 在块级、内联、替换元素里表现不一。比如给 <span> 单独设 line-height，若没触发行框生成（如前后无换行或空格），可能完全不生效；而 <p>、<div> 这类块容器则稳定起效。
- 对多行文本容器（
<p>,<div class="text">），直接设line-height即可 - 对单行居中场景（如导航文字），常配合
height使用：height: 48px; line-height: 48px;—— 但仅限固定高，响应式慎用 - Flex 容器里的文字，
line-height仍控制行内高度，不影响align-items的基准线位置
遇到中文标点“悬挂”或行尾割裂怎么办？
纯靠 line-height 无法解决中文排版里的标点挤压、避头尾等问题。浏览器默认不处理「中文禁止在行首出现的标点」（如句号、逗号、右括号），所以即使行高足够，视觉上仍可能显得拥挤或断句奇怪。
立即学习“前端免费学习笔记（深入）”；
- 基础缓解：加
text-align: justify;+text-justify: inter-ideograph;（仅部分 Chrome/Edge 支持） - 更可靠的做法是用
overflow-wrap: break-word;配合word-break: keep-all;，减少生硬断行 - 真正要对标点悬挂（hanging punctuation），得靠 CSS
hanging-punctuation属性，但目前 Safari 仅支持first值，Firefox 不支持，生产环境慎用
检查是否被其他样式覆盖或重置
很多项目引入了 Normalize.css 或重置库（如 reset.css），它们会把 line-height 设为 normal 或极小值。另外，某些 UI 框架（如 Bootstrap）在 .lead、.display-* 类里主动调整了 line-height，容易产生意料外的叠加效果。
- 用浏览器开发者工具检查计算后的
line-height值，看是normal还是具体数字 - 注意继承链：如果父级设了
line-height: 1.2;，子级font-size放大后，实际行高 =1.2 × 子级 font-size，未必符合预期 - 临时调试可用
!important验证是否被覆盖，但上线前必须移除
实际行距效果取决于字体度量（font metrics）、字号、line-height 三者共同作用，同一数值在不同字体下视觉感受可能差很多——这点最容易被忽略。
