line-height设成多少才不踩坑
别直接写 line-height: 1.5 就完事——这个值在字体、字号、父容器 font-size 变化时行为不一致。它其实是相对于当前元素的 font-size 计算的，比如 font-size: 16px 时 line-height: 1.5 等于 24px；但若父级用了 rem 或 em，嵌套后可能意外缩放。
更稳的做法是用无单位数值（如 1.4），避免被继承放大；实在要固定像素值，就用 px（如 line-height: 22px），但它会失去响应性。
- 移动端小字号（
14px）建议用1.4–1.6，太大会割裂段落节奏 - 大标题（
font-size: 32px）用1.2足够，再高显得松散 - 千万别对
input或button直接设line-height来垂直居中——它会干扰行内替换元素的基线对齐，改用padding更可靠
line-height在flex或grid容器里失效？
当段落放在 display: flex 或 display: grid 的容器中，line-height 依然生效，但它只控制「行框高度」，不控制容器自身高度。你看到“没变化”，往往是因为容器高度由子项内容撑开，而 line-height 没触发最小高度约束。
想让段落视觉上居中或留白，得配合其他属性：
立即学习“前端免费学习笔记（深入）”；
- 给段落加
margin（如margin: 0.8em 0），比依赖line-height更可控 - 在 flex 容器上用
align-items: center或justify-content: center，而不是调子元素的line-height -
line-height在单行文本中能撑高容器，但在多行段落里，它只影响行间距，不改变容器height
line-height和vertical-align的关系必须理清
line-height 和 vertical-align 是一对“搭档”，但只在行内上下文起作用。比如图片和文字混排时，vertical-align: middle 的参考基准就是当前行的行框（由 line-height 决定高度）。如果忘了这点，就会发现图片总“飘”得不对。
常见掉坑场景：
- 给
img设了vertical-align: middle，但父段落line-height太小，导致图片被裁切上沿 - 用
line-height: 0清除 inline 元素间隙，结果所有文字也消失了——因为行框塌陷，文字渲染位置失控 - 表格单元格（
td）默认vertical-align: middle，但它的对齐基准是整个单元格高度，和line-height无关；这时候调line-height不影响垂直居中效果
line-height在不同字体下表现差异大
思源黑体、苹方、Segoe UI 这些字体自带不同的字怀（counter）和上升/下降部（ascender/descender），同样 font-size: 16px + line-height: 1.5，实际行间空白感完全不同。尤其中英文混排时，英文字母常“顶天立地”，中文却留白多，容易看起来上浮。
解决思路不是统一调高 line-height，而是分情况处理：
- 纯中文段落可保守用
1.4–1.45；中英混排建议1.5起步，再微调 - 用
font-feature-settings: "tnum"或font-variant-numeric: tabular-nums控制数字等宽时，可能影响基线，连带改变line-height视觉效果 - Web Font 加载期间 FOUT（Flash of Unstyled Text）会让
line-height突然跳变，可在@font-face中加font-display: optional或预设 fallback 字体的line-height值
