根本原因是label被当文字流、input被当替换元素，基线天然不一致；推荐用flex布局（.form-row{display:flex;align-items:center}）统一控制对齐，每组label+input需独立容器包裹。
label 和 input 默认不对齐的根本原因
不是写法错了，是浏览器默认把 <label> 当文字流处理、把 <input> 当替换元素（replaced element）处理，两者基线（baseline）位置天然不一致。哪怕你写了 display: inline-block，vertical-align 默认值仍是 baseline，结果就是 label 文字底部和 input 底边对不齐——尤其在有 placeholder 或字体大小不同时更明显。
用 flex 布局统一控制每行 label+input 对齐
这是目前最稳定、语义清晰、响应式友好的做法，不用猜 line-height，也不用 hack margin。
- 每组
<label>+<input>必须包在独立容器里，比如<div class="form-row"> - CSS 中设
.form-row { display: flex; align-items: center; gap: 0.5em; } -
label加flex: 0 0 100px;（固定宽度防换行挤压），input加flex: 1; min-width: 0;（避免小屏溢出） - 别在父
<form>上设line-height，它会透传干扰；如有必要，显式写line-height: normal;
input 和 button 并排时底部不齐怎么修
典型现象：<input type="search"> 和 <button> 挨着放，button 看起来“沉下去”了。这不是 bug，是 button 默认有 border、padding，且某些浏览器给它加了额外 line-height。
- 统一重置：给
input和button都加vertical-align: middle; - 确保两者
font-size、padding、border一致，否则视觉高度差仍存在 - 如果用了自定义字体，注意 font metrics 差异——iOS Safari 尤其敏感，建议加
height显式约束 - 避免用
float或inline-block混搭，它们对基线的计算逻辑完全不同
表格布局表单的兼容性陷阱
虽然 display: table 能模拟对齐，但现代项目中它只是权宜之计：
立即学习“前端免费学习笔记（深入）”；
-
display: table-cell的vertical-align行为受父table-row高度影响，而高度又常被内容撑开，导致“看似居中实则浮动” - 在 iOS Safari 中，
table-cell内的input可能触发键盘弹起后布局错位 - 无障碍工具（如 VoiceOver）对非语义化 table 布局识别率低，
<label for>关联可能失效 - 如果你必须支持 IE11，flex fallback 可用
display: -ms-flexbox，但别回退到 float+clearfix 方案——它在高 DPI 屏幕上容易像素错位
vertical-align: baseline 的实现细节差异，尤其是当表单混用 <select>、<textarea>、自定义组件时。建议把每组控件都视为一个独立对齐单元，而不是试图全局统一样式。 
