box-sizing 单独设置不管用是因为仅统一高度计算逻辑，未解决渲染基线位置、空白字符间隙及默认 padding 差异；需同时处理 font-size: 0（父容器）、box-sizing: border-box（两者）、vertical-align: middle（行内对齐）及显式 padding: 0。
为什么 box-sizing 单独设置不管用
很多人给 input 加了 box-sizing: border-box，但和 button 依然不等高——因为 button 默认是 border-box，而 input（尤其 type="text"）默认是 content-box，但光统一这个还不够。浏览器对 button 的默认 padding、line-height、font-size 都有隐式继承，且会参与行内布局计算。所以只改 box-sizing 只解决「高度计算逻辑」，不解决「渲染基线位置」和「空白字符间隙」。
必须同时处理的三个层面
缝隙和错位是叠加问题，得一块儿压：
-
font-size: 0加在父容器上，消灭换行产生的空白字符间隙（最稳定，比写在同一行可维护） -
box-sizing: border-box同时作用于input和button，让设定的height包含border+padding -
vertical-align: middle加在button上（或两者都加），对齐行内元素的基线；仅靠height相同无法保证视觉居中
input 和 button 的默认 padding 差异要手动归零
即使重置了 * { margin: 0; padding: 0 }，某些浏览器仍会给 button 留 2–4px 的默认 padding，而 input[type="text"] 的默认 padding 是上下 1px、左右 3px（Chrome）。不显式设 padding: 0，高度就永远差那么几像素。
推荐写法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
input, button {
box-sizing: border-box;
height: 36px;
padding: 0;
margin: 0;
border: 1px solid #ccc;
font-size: 14px; /* 避免子元素 font-size: 0 影响内容可读性 */
}
<p>.search-wrap {
font-size: 0; /<em> 关键：父容器灭空白 </em>/
}</p><p>.search-wrap input,
.search-wrap button {
font-size: 14px; /<em> 恢复内容字体 </em>/
vertical-align: middle;
}
Flexbox 是更现代但需注意兼容性的替代方案
如果不需要支持 IE10 及更早版本，直接用 display: flex 更干净：
- 天然无视空白字符，不用
font-size: 0 - 高度自动对齐，
align-items: center一行搞定垂直居中 - 仍建议保留
box-sizing: border-box，避免边框撑出意外高度
但要注意：老版本 Safari 对 flex 的 input 渲染有 bug，比如 height 被忽略，此时退回 inline-block + vertical-align 更稳。
真正容易被忽略的是：哪怕所有样式写对了，只要父容器没清空 font-size 或没设 vertical-align，缝隙和错位就会在不同浏览器里反复出现——这不是 bug，是 CSS 行内格式化上下文的正常表现。
