font-size 与 line-height 必须协同设置，单独调整 font-size 会因 line-height 继承或固定值导致行距异常；推荐使用无单位数值（如 line-height: 1.5）以确保响应式适配和缩放一致性。
直接用 font-size 会破坏行高，别只调它
单纯改 font-size 而不碰 line-height，浏览器会按默认比例（通常约 1.2 倍字体大小）算行高，字体一大，行距就撑开、重叠或留白过大。这不是 bug，是 CSS 的默认行为。
-
font-size控制文字大小，line-height独立控制行间距，二者不自动联动 - 用像素值（如
line-height: 24px）容易在响应式场景出问题，优先用无单位数值（如line-height: 1.5），它基于当前font-size计算 - 如果父容器用了
display: flex或vertical-align，子元素文字大小变化后可能触发对齐偏移，需检查align-items或vertical-align设置
行距混乱时优先检查 line-height 是否被继承或覆盖
常见现象：改了某段文字的 font-size，但行距没变或突变——大概率是 line-height 从父级继承了固定值（比如 line-height: 1），或者被其他 CSS 规则意外覆盖。
- 用浏览器开发者工具（F12）选中文字元素，看「Computed」面板里的
line-height实际值，注意它是否为normal、数字、像素值，还是继承自父级 - 若父级设了
line-height: 1.2，子级只改font-size，行高会按 1.2 × 新字号重新计算；但若父级写了line-height: 20px，子级再大也卡死在 20px - 重置行高可加
line-height: normal或显式写line-height: 1.4（推荐无单位）
响应式文字大小 + 行距统一适配的稳妥写法
用 rem 或 em 配合根字体缩放时，line-height 必须用无单位值，否则缩放失效。
html {
font-size: 16px;
}
@media (max-width: 768px) {
html { font-size: 14px; }
}
p {
font-size: 1.125rem; /* = 18px / 16px */
line-height: 1.6; /* ✅ 正确：1.6 × 当前 font-size */
}
- 避免
line-height: 1.6em—— 它会叠加计算，导致行高翻倍 - 标题类元素（
h1–h6）建议单独设置line-height，因为它们默认font-size差异大，通用值易出错 - 内联元素（如
span）若包裹文字并改了font-size，需确保其line-height不为normal且未被父级压缩（例如父级line-height: 1会导致文字挤在一起）
行距仍异常？重点查这三处
多数“调完字变大、行距乱飞”的问题，根源不在字体本身，而在布局上下文。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align：图片、inline-block元素混排时，该属性会影响基线对齐，间接拉扯行高；设为vertical-align: top或middle可快速验证 -
margin或padding：特别是段落p默认有上下边距，放大字体后视觉上像“行距变大”，其实是 margin 在撑开 - 字体度量差异：换字体（如从
system-ui换成Georgia）时，即使font-size和line-height不变，实际行高也可能因字体自身 ascender/descender 高度不同而微调
行高不是字体的附属品，它是独立参与渲染计算的属性。改字大小却不碰行高，等于只拧松螺丝却不扶住零件——看起来动了，其实整个结构已经偏了。
