根本原因是input和button默认盒模型不同：input为content-box（border/padding外扩），button为border-box（border/padding内含），导致同设height:40px时视觉高度不一致；统一box-sizing: border-box并配合vertical-align: top或flex布局可彻底解决。
input 和 button 高度不一致的根本原因
不是你写错了 height，而是它们默认的盒模型行为不同：浏览器给 input 和 button 都加了隐式 padding 和 border，且字体渲染基线（vertical-align）默认是 baseline，但两者的文本内容高度不同（比如按钮里有图标或更大字号），导致视觉上“明明设了 40px 却一个高一个矮”。
用 box-sizing: border-box + vertical-align: top 快速对齐
这是兼容性最好、改动最小的方案，适用于 IE9+ 及所有现代浏览器：
- 给
input和button都加上box-sizing: border-box，确保设置的height包含内边距和边框 - 统一设置
vertical-align: top（或middle），切断 baseline 对齐带来的错位 - 显式重置
padding和font-size，避免浏览器默认值干扰
input, button {
box-sizing: border-box;
vertical-align: top;
padding: 0;
font-size: 14px;
height: 40px;
border: 1px solid #ccc;
}
父容器用 Flex 布局彻底规避对齐陷阱
当需要稳定、语义清晰、响应式友好的方案时，直接放弃行内元素对齐逻辑，改用 display: flex：
- 把
input和button包在同一个父容器里（如div或form） - 给父容器设
display: flex和align-items: center，高度自动拉齐 - 注意：HTML 中
button放在input前或后不影响对齐，但会影响 tab 键顺序
<div class="search-wrapper">
<input type="text" class="search-input">
<button type="submit" class="search-btn">搜索</button>
</div>
.search-wrapper {
display: flex;
align-items: center;
}
.search-input, .search-btn {
height: 40px;
box-sizing: border-box;
}
那些容易被忽略的细节坑
实际调试中，以下几点常被跳过，却直接导致对齐失败：
立即学习“前端免费学习笔记（深入）”；
-
font-size不一致：按钮里用了图标字体（如font-size: 16px），而input是默认 14px，会撑开基线位置 - 空白字符缝隙：HTML 中换行或空格会让
input和button之间产生约 4px 间隙，表现为“左右不对齐”或“右侧偏移” - IE7/8 兼容需求：若必须支持，需额外给父容器设
font-size: 0消除间隙，并对input用position: absolute定位（但建议直接放弃支持） -
overflow: hidden影响基线：某些 UI 库会在按钮上加这个属性，会改变vertical-align的计算方式
flex 是未来方向，但老项目里 vertical-align + box-sizing 仍是最快能落地的解法。 
