表单输入框高度不一致主因是line-height、padding、border、box-sizing混用；需统一box-sizing: border-box，input禁用line-height而用padding控制文字留白，textarea和select需单独处理，推荐用CSS自定义属性统一尺寸。
表单输入框高度不一致，通常不是因为设置了不同 height，而是 line-height、padding、border、box-sizing 这几项混用导致的视觉和实际尺寸偏差。尤其在 input[type="text"]、textarea、select 混排时更明显。
统一 box-sizing 是前提
默认 input 的 box-sizing 是 content-box，而很多重置样式（如 normalize.css）会设为 border-box。若没统一，padding 和 border 会额外撑大元素。
- 给所有表单控件加：box-sizing: border-box;
- 推荐写在全局重置里：input, select, textarea, button { box-sizing: border-box; }
line-height 对 input 实际无效，别乱设
普通 <input type="text"> 不支持 line-height 垂直居中文字——它只认 font-size + padding。强行设 line-height 可能被忽略，或在某些浏览器引发基线错位。
- 想控制文字上下留白，只用 padding-top 和 padding-bottom
- 如需 40px 总高度，且边框 1px、字体 14px，则：padding: 12px 12px；border: 1px solid #ccc；height: auto（不写 height）
textarea 和 select 要单独处理
textarea 默认是 content-box 且支持 line-height；select 在部分浏览器中 line-height 行为不一致。建议：
立即学习“前端免费学习笔记（深入）”；
- textarea 统一用 line-height: 1.5; + padding 控制行高与内边距
- select 加 appearance: none; 后，可安全设 padding 和 line-height（注意加兼容前缀）
- 三者高度对齐技巧：设相同 min-height 或固定 height，并确保 padding + border + font-size 组合结果一致
用 CSS 自定义属性快速同步
把关键尺寸抽成变量，避免重复计算：
- :root { --form-unit: 4px; --form-font: 14px; --form-border: 1px; }
- input { padding: calc(var(--form-unit) * 3) calc(var(--form-unit) * 3); font-size: var(--form-font); border: var(--form-border) solid #ddd; }
- 这样改一个变量，整套表单高度就联动更新
