像素级对齐失败的根本原因是盒模型四层（content/padding/border/margin）及字体度量未统一：必须全局设 box-sizing: border-box，反向验证逻辑像素换算，并用 flex 或实测 line-height 解决字体高度偏差。
做不到像素级对齐，不是因为你没加 margin: 0 或没调 vertical-align，而是盒模型各层尺寸没对齐——设计标注、浏览器渲染、CSS声明三者之间存在系统性偏差。
box-sizing: border-box 必须全局生效
设计师量的「宽度 100px」是含 padding 和 border 的外轮廓，而默认 box-sizing: content-box 下，width: 100px 只管内容区。不统一，所有后续调整都是徒劳。
- 在项目入口 CSS 最顶部写：
* { box-sizing: border-box; }，不是div或.container - 特别注意
input、button、textarea等表单元素，某些 UA 样式会忽略通配符，需额外加固：input, button, select, textarea { box-sizing: border-box; } - 若某处必须用
content-box（如 canvas 容器），显式写box-sizing: content-box，避免继承污染
逻辑像素换算必须反向验证
设计稿标「按钮高 44px」，不能直接照抄。它可能是 @2x 切图量出的 88px 物理像素，对应 CSS 逻辑像素应为 44px；也可能是 iOS 的 44pt，按 1pt = 1px 直接用。
- 先看标注是否带 @2x / @3x 或注明「Retina」：是 → 所有数值除以缩放比（@2x ÷2，@3x ÷3）
- 若标注单位是 pt（尤其来自 Sketch/iOS 原型），按
1pt = 1px直接写 CSS 尺寸 - 最可靠方式：打开 Chrome DevTools → Ctrl+Shift+C → 悬停元素，用测量工具比对真实渲染尺寸，反向校验换算是否成立
字体与行高导致的高度偏差必须拆解
设了 height: 44px + font-size: 16px，但按钮实际高度常是 46.8px —— 因为字体有 ascent/descent、line gap，line-height 控制的是整行高度，不是字形本身。
立即学习“前端免费学习笔记（深入）”；
- 单行文本垂直居中，优先用
display: flex; align-items: center;，而非靠line-height硬撑 - 若必须用
line-height，需实测：在相同 font-family 下，font-size: 16px对应的最小可用line-height值（常为 1.2～1.25） - 中文字体尤其要注意隐形上下边距，建议用
font-feature-settings: "liga"或切换更可控字体（如 -apple-system, system-ui）
inline 元素对齐本质是 baseline 问题
<img alt="CSS盒模型下如何实现元素的精准像素对齐？" > 和文字总不对齐，不是 margin 没调好，而是 vertical-align: baseline 默认把图片底部对齐文字基线，下方留空隙。
- 解决方式一：
img { vertical-align: middle; }（适用于单行图文混排） - 解决方式二：
img { display: block; }或img { display: inline-block; vertical-align: top; } - 避免用
margin-bottom: -4px这类 magic number 微调——换字体、换字号就失效
真正卡住像素对齐的，往往不是某一行代码写错，而是盒模型四层（content/padding/border/margin）中某一层被隐式忽略，或字体度量未被当作「尺寸变量」来对待。每次对不齐，先查 box-sizing 是否生效、再量真机渲染尺寸、最后看 font-metrics 实际占位——这三步跳过任何一环，调再多 padding 都只是掩盖问题。
