默认基线对齐导致label“偏上”，因input底部留有下降空间；应统一设vertical-align: middle或用flex布局align-items: center实现稳定居中，避免像素微调。
label 和 input 默认对齐为什么看起来“偏上”
浏览器对 label（行内元素）和 input（替换元素，默认 vertical-align: baseline）的默认对齐方式是基线对齐，而 input[type="text"]、input[type="checkbox"] 等底部会留出下降空间（descender space），导致视觉上 label 文字“浮在上面”。这不是 bug，是 CSS 规范行为。
常见错误现象：label 看起来比 input 高出 2–4px；加了 margin-top 临时修正后，换字体或换浏览器又错位。
- 不要只调
label的margin或padding—— 没有统一基准，响应式下极易失效 - 避免用
line-height强撑label—— 对 checkbox/radio 无效，且干扰文字可读性 - 优先控制
vertical-align，而非“猜像素”
用 vertical-align: middle 实现稳定居中
把 label 和 input 都设为 vertical-align: middle 是最轻量、兼容性最好的方案（IE8+ 支持）。它让两者中线对齐，不依赖字体度量，也不受 line-height 干扰。
示例写法：
<label>用户名：</label>
<input type="text">
label, input {
vertical-align: middle;
}
- 必须同时设置
label和input，只设一个没用 - 适用于
input[type="text"]、input[type="number"]、select、textarea（注意textarea需设display: inline-block才生效） - 对
input[type="checkbox"]和input[type="radio"]同样有效，但建议额外加margin-right: 4px避免紧贴文字
flex 布局更适合复杂表单结构
当 label 和 input 不是简单并列（比如 label 在上、input 在下，或带图标/验证状态），用 flex 更可控。把容器设为 display: flex，再用 align-items: center 垂直居中。
示例：
<div class="form-item">
<label>邮箱：</label>
<input type="email">
</div>
.form-item {
display: flex;
align-items: center;
gap: 8px;
}
-
gap替代 margin，避免外边距合并问题 - 如果 label 需要换行（如长提示文本），给
label加flex-shrink: 0防止被压缩 - IE10+ 支持 flex，若需支持 IE9 及更早版本，应回退到
vertical-align方案
checkbox/radio 的 label 包裹写法更可靠
对于复选框和单选按钮，直接用 label 包裹 input，既能点击文字触发，又能天然规避对齐问题 —— 因为此时 input 是 label 的子元素，不再参与行内格式化上下文（BFC）中的基线计算。
正确写法：
<label> <input type="checkbox"> 接收通知 </label>
- 无需任何 CSS 即可垂直居中（文字自动与 checkbox 中心对齐）
- 语义更清晰，无障碍支持更好（screen reader 自动关联）
- 如果必须 label 在前、input 在后（如设计要求），仍推荐用 flex 容器，而不是强行调
vertical-align
真正容易被忽略的是：不同输入控件的盒模型本质不同 —— text input 是替换元素，checkbox 是原子替换元素，select 渲染高度还受系统主题影响。靠“统一加 margin-top: 2px”这种做法，在 macOS Safari 和 Windows Chrome 下表现可能完全不一致。用 vertical-align 或 flex 这类基于布局规则的解法，才能一次写对，长期省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
