line-height 过小会导致文本重叠，应使用无单位值并随 font-size 适配；padding 不可替代 line-height 控制行距；flex 布局中 align-items 可能引发重叠；字体加载闪动需 font-display 配合后备字体行高预设。
line-height 设置过小会导致行内文本挤压重叠
当 line-height 小于字体实际高度（如 font-size: 16px 配 line-height: 1），多行文本的上下行距不足，字母上伸部（ascender）和下延部（descender）就会物理性碰撞。尤其在中文混排英文或使用自定义字体时更明显。
实操建议：
- 默认用无单位数值（如 line-height: 1.5），让浏览器按当前 font-size 自动计算；
- 避免用像素值硬写（如 line-height: 20px），否则缩放或换字体时易失效；
- 对标题类大字号元素，适当提高值（line-height: 1.2～1.3 足够；正文推荐 1.4～1.6）；
- 在移动端小屏下，可配合媒体查询微调：
@media (max-width: 480px) {<br> p { line-height: 1.55; }<br>}
padding 不能替代 line-height 控制行间距
padding 作用于块级容器的内外边距，它撑开的是整个元素的盒模型空间，而非文本行与行之间的垂直距离。滥用 padding 模拟行高，会带来几个实际问题：
- 段落首尾多出不必要的空白，破坏视觉节奏；
- 多个相邻
p或div堆叠时，上下padding可能合并（margin collapse），导致间距不可控； - 响应式切换断点时，需同步调整多处
padding，维护成本高。
正确做法是：用 line-height 管理行内基线距离，用 margin（非 padding）控制段落间空隙。例如：
p {<br> line-height: 1.5;<br> margin: 1.2em 0;<br>}
响应式中 font-size 变化时 line-height 必须同步适配
很多开发者只改 font-size，却忽略 line-height 的相对性。比如在 @media (min-width: 768px) 中把正文从 16px 改为 18px，若仍用 line-height: 1.4，实际行高从 22.4px 变成 25.2px——看似变大，但比例未变，有时反而因字号增大+字重加粗导致视觉拥挤。
立即学习“前端免费学习笔记（深入）”；
更稳妥的方式：
- 始终用无单位数值（line-height: 1.5），它天然随 font-size 缩放；
- 若需精细控制，可在媒体查询中统一调整：
@media (min-width: 768px) {<br> body { font-size: 100%; } /* 重置基准 */<br> p { line-height: 1.55; }<br>}- 避免在子元素里重复设
line-height，除非有明确设计意图（如按钮内文字需紧凑）。
flex 或 grid 布局下文本重叠常因 align-items 引发
用 display: flex 包裹文本容器（如卡片标题+描述）时，若父容器设了 align-items: center 或 stretch，而子元素没设 height 或 min-height，可能导致文本被“挤”进过窄高度，触发重叠——这时调 line-height 或 padding 都无效。
排查要点：
- 检查父容器是否意外设置了固定 height 或 max-height；
- 子文本元素是否用了 white-space: nowrap 或 overflow: hidden；
- flex 容器中优先用 align-self: flex-start 替代全局 align-items；
- 真需垂直居中，改用 place-content: center + min-height 更安全。
实际项目中最容易被忽略的，是字体加载完成前的 FOIT/FOUT 导致的临时重叠——系统默认字体和 Web Font 行高不一致，会在切换瞬间闪动。这个问题无法单靠 line-height 解决，得配合 font-display: swap 和后备字体族的行高预设。
