input和label垂直不对齐主因是默认baseline不一致，统一设vertical-align: middle最简有效；更可靠方案是用flex布局包裹二者并设align-items: center。
input 和 label 垂直不对齐，不是样式没加对，而是默认基线（baseline）不一致导致的视觉错位——直接设 vertical-align: middle 是最简、最稳的解法。
为什么 input 和 label 默认不齐
浏览器给 input 设了 vertical-align: baseline，而 label 的文字行高和字体度量不同，基线位置天然偏下；line-height 不一致会放大这个偏差。这不是 bug，是规范行为。
- 不要依赖父容器的
line-height传导——它对表单控件无效 -
input、select、button都要统一设vertical-align: middle，不能只设其中一个 - 避免用
margin-top或padding“手动调齐”，响应式下极易失效
用 flex 包裹 label + input 更可靠
单靠 vertical-align 在复杂布局中仍有边界情况（比如多行 textarea 或含图标按钮），display: flex 是目前语义清晰、兼容性好、控制力强的首选方案。
- 每个表单项用独立
<div class="form-row">包裹，不共享父级flex .form-row { display: flex; align-items: center; gap: 0.5em; }-
label设flex: 0 0 auto或固定宽，input设flex: 1; min-width: 0;防止小屏溢出 - 禁用
float—— 它会让align-items失效
input 和 button 并排时底部下沉怎么办
典型现象：<input type="search"> 和 <button> 同行后 button 明显更低。根源是 button 默认有 border、padding 和隐式 line-height，而 input 没有。
立即学习“前端免费学习笔记（深入）”；
- 统一重置：对两者都设
all: unset;，再显式定义border、padding、height - 强制高度一致：
height: 36px;比line-height更可控（尤其在 Windows Chrome 下） -
vertical-align: top比middle在某些旧版 Safari 中更稳定 - 避免混用单位：
padding: 8px和font-size: 0.875rem组合容易因渲染精度误差错位
真正难的不是写对某一行 CSS，而是意识到：表单对齐问题本质是基线系统与盒模型的叠加效应。哪怕只改一个 vertical-align，也得同步检查 font-family 是否跨平台一致、box-sizing 是否全局重置、以及是否无意中触发了 inline-block 的换行空白。这些细节不处理，换设备就露馅。
