label 和 input 垂直错位本质是 baseline 对齐差异所致，统一设 vertical-align: middle 并配合 box-sizing: border-box、禁用父容器 line-height、每组 label+input 用 flex 包裹，可彻底解决。
label 和 input 垂直方向错位，本质是 baseline 对齐惹的祸
默认情况下 label 和 input 都走 vertical-align: baseline，但它们的基线位置不同：input 的 baseline 在文字下边缘（含下划线），label 则按其内联文本内容计算——哪怕文字一样，渲染高度也可能差 1–2px。这不是 bug，是浏览器行为，强行加 margin-top 或 padding 只会让问题更难复现和维护。
统一设 vertical-align: middle 是最轻量、兼容性最好的解法，适用于所有现代浏览器及 IE11+：
-
label、input、select、textarea、button必须全部显式声明vertical-align: middle - 同时重置
box-sizing: border-box，避免 padding/border 导致实际高度不一致 - 父容器别设
line-height（尤其别设成1.5这类相对值），可加line-height: normal防干扰
用 flex 布局包裹每组 label + input，别让整个 form 当 flex 容器
很多人把 <form> 直接设为 display: flex; flex-direction: column，结果发现 label 和 input 在 Safari 或小屏下突然错位——因为 flex 容器对齐逻辑会跨行作用，而表单语义要求每组标签/控件是独立单元。
正确结构是：每个 <label></label><input> 组合必须包进一个独立容器，比如 <div class="form-row">：
立即学习“前端免费学习笔记（深入）”；
.form-row { display: flex; align-items: center; gap: 0.5em; }-
.form-row label { flex: 0 0 100px; min-width: 0; }（固定宽防挤压，min-width: 0是 iOS Safari 必加项） -
.form-row input { flex: 1; min-width: 0; }（min-width: 0防止 flex item 溢出）
height 不一致还可能来自 font-size / line-height / padding 的隐式叠加
你给 .form-row 设了 height: 40px，再分别给 label 和 input 加 padding: 6px，实际高度就变成 40px + 12px = 52px——但这个额外高度不会撑开 .form-row，而是向下溢出，造成视觉“下沉”。
解决办法不是删 padding，而是统一控制视觉高度：
- 删掉
label和input的上下padding，改用height+line-height控制（如height: 40px; line-height: 40px;） - 或保留
padding，但确保box-sizing: border-box已启用，且父容器没设height限制 - 避免混用
em和px：同一组中font-size和line-height单位要一致，否则缩放时错位加剧
radio/checkbox 和 label 对齐要单独处理
input[type="radio"] 和 input[type="checkbox"] 是内联可替换元素，自带 margin（Chrome 默认 margin: 3px 3px 0 0），且基线对齐更敏感。仅设 vertical-align: middle 不够稳定。
推荐组合策略：
- 显式清除默认 margin：
input[type="radio"], input[type="checkbox"] { margin: 0; } - 统一
vertical-align: middle，并确保label也设同值 - 若仍轻微偏移，可微调
transform: translateY(-1px)（仅限 checkbox/radio，勿滥用） - 别用
float或position: absolute强拉——会破坏点击热区和可访问性
最容易被忽略的是：所有表单控件必须统一 vertical-align 和 box-sizing，哪怕只漏一个 button 或 select，整行对齐就可能在 Safari 或旧版 Edge 中崩掉。
