根本原因是vertical-align基线不一致、box-sizing不统一及换行空白符；推荐用display: flex + align-items: center一劳永逸解决，兼容旧浏览器需统一vertical-align、font-size、line-height和box-sizing。
input 和 button 并排时视觉错位，不是代码写错了，是它们默认渲染行为根本不同——vertical-align 基线不一致、box-sizing 不统一、换行产生空白符，三者叠加导致对不齐。
为什么设了相同 height 还是高低不一
即使都写了 height: 40px，input 和 button 的实际占用高度仍可能差 2–3px。原因有三：
-
input默认box-sizing: border-box，而部分旧浏览器中button是content-box，同样 height 下 padding/border 算法不同 -
button默认带border和padding（Chrome 中默认padding: 1px 6px），input则更“干净” - 若
button内含图标字体（如font-awesome），其font-size往往比input默认的 14px 更大，直接抬高内容基线
用 flex 布局一劳永逸对齐
放弃调 vertical-align 和 line-height，直接用现代方案：
- 给父容器（比如
<div class="search-bar">）加display: flex; align-items: center; - 确保
input和button都是默认display: inline或inline-block，flex 会自动拉平基线 - 重置两者默认干扰项：
button { border: 0; padding: 0; }，input { box-sizing: border-box; } - 避免混用
float或margin-top—— 它们会和 flex 的对齐逻辑冲突
HTML 换行产生的缝隙怎么消
源码里 <input> 和 <button> 分两行写，中间的换行符会被浏览器渲染成空格，造成约 4px 水平间隙：
立即学习“前端免费学习笔记（深入）”；
- 最简解法：把两个标签写在同一行，中间不留空格 ——
<input><button></button> - 通用解法：父容器设
font-size: 0;，再单独给子元素恢复字号，例如.search-input { font-size: 14px; } - 别用
float: left清间隙 —— 它会让元素脱离文档流，后续布局容易失控
兼容 IE10 及以下的老项目怎么办
Flex 不可用时，必须手动统一渲染上下文：
- 强制两者为
display: inline-block，并设相同vertical-align: top（不用middle，它依赖父容器line-height） - 显式声明
font-size和line-height，例如input, button { font-size: 14px; line-height: 40px; height: 40px; } - 用
table-cellfallback：父容器display: table，子元素display: table-cell; vertical-align: middle;，但会丢失响应式换行能力
真正难的不是选哪种方案，而是意识到：对齐问题从来不是单点样式能解决的，它暴露的是盒模型、基线、显示模式三者的耦合。哪怕只改一个 padding，也得同步检查 box-sizing 和 font-size 是否还匹配。
