font-size仅控制字体渲染高度，需同步调整line-height、vertical-align等属性避免错位；优先检查line-height单位一致性，慎用em/rem连锁影响，用DevTools三步法定位基线与盒模型问题。

用 font-size 调文字大小，但别只改它

直接改 font-size 是最常用方式，但它只是影响“字体渲染高度”，不等于行高或元素占位高度。比如把 font-size: 14px 改成 20px，文字变大了，但若父容器 line-height 没同步调，文字可能上顶、下坠或溢出。

常见错位现象包括：文字贴着上边框、按钮内文字偏下、多行文本对不齐、flex 容器里子项垂直居中失效。

• font-size 变化后，优先检查同级元素的 line-height 是否一致（尤其单位是无单位数字时，如 line-height: 1.5 是相对当前 font-size 计算的）
• 避免混用 px 和 em/rem 做 line-height —— line-height: 1.5em 会二次计算，容易失控
• 表格单元格（<td>）里调文字大小后错位，大概率是 <code>vertical-align 默认值 baseline 在作怪，可显式设为 middle 或 top

  flex 布局里文字变大后对不齐？先看 align-items 和 height

  Flex 容器中，子项默认按 align-items: stretch 拉伸，但如果子项本身没设 height，而只靠文字撑开，font-size 一变，基线位置就漂移，视觉上就像“上下跳动”。

  典型场景：导航栏菜单项用 display: flex，每个 <a></a> 里文字放大后，图标和文字不再水平居中。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 给 flex 子项加 align-self: center 或统一设 height + display: flex + align-items: center
  • 慎用 vertical-align: middle 在 inline 元素上——它只对 inline-level 元素生效，且参考的是父行盒的 baseline，不是 flex 容器
  • 如果用了 font-size: clamp() 响应式缩放，记得配套调整 min-height 或 padding，否则小屏下文字缩小但容器没收缩，留白错位

  用 rem 或 em 调字号时，根字体变化会连锁影响对齐

  设 html { font-size: 16px } 再用 font-size: 1.25rem 看似方便，但一旦 JS 动态改了根字号（比如适配字体缩放或夜间模式），所有基于 rem 的尺寸、line-height、甚至 border-radius 都会同比例变化，而图片、图标字体（如 iconfont）未必同步响应，造成错位。

  • 检查是否在 JS 中执行过 document.documentElement.style.fontSize = ...，并确认配套更新了 line-height 相关样式
  • em 更危险：它相对于父元素 font-size，嵌套深了极易指数级放大或缩小，调试时用浏览器开发者工具逐层看 computed font-size 值
  • 对齐敏感区域（如表单控件、按钮组）建议用 px 或 rem 配固定 line-height（如 line-height: 24px），避开相对单位连锁反应

  排查错位的三步定位法

  别猜，打开 DevTools 用这三步快速锁定根源：

  • 选中错位文字，在 Styles 面板里点开 Computed，拉到底看 line-height、height、vertical-align、box-sizing 的实际值，注意单位是不是预期的
  • 临时给该元素加 outline: 1px solid red，观察 outline 是否包住文字、有没有空白间隙，判断是内容溢出还是盒模型塌陷
  • 右键「Scroll into view」再按住 Shift 点击元素，浏览器会高亮显示它的基线（baseline），对比相邻元素基线位置，就能确认是不是 vertical-align 或 line-height 不一致导致的视觉偏移

  对齐问题很少是单一属性的问题，往往是 font-size、line-height、vertical-align、box-sizing 四者组合失配的结果。改字号前，先想清楚这个文字在哪种上下文里渲染——是块级流、inline 流，还是 flex/grid 容器，对应约束完全不同。