HTML搜索按钮与输入框无缝拼接？消除margin与border-html教程-PHP中文网

根本原因是input和button默认基线对齐及box-sizing不一致；必须统一box-sizing:border-box并设vertical-align:top，同时去除相邻边框（如input右框、button左框）才能彻底对齐。

html搜索按钮与输入框无缝拼接？消除margin与border

搜索框和按钮之间有白缝，怎么彻底对齐？

根本原因是 input 和 button 默认有浏览器内置的 margin、border、box-sizing 行为不一致，且行内元素默认存在基线对齐（baseline）导致视觉错位。光清 margin 不够。

必须统一设置 box-sizing: border-box，否则 padding 会撑大宽度
vertical-align: middle 或 vertical-align: top 是关键，否则按钮总“悬”在输入框下半截
Chrome/Firefox 对 button 的默认 border 和 padding 微有差异，建议显式重置
避免用 float 或 flex 外部包裹——除非你真需要响应式布局；简单拼接优先用纯 inline-block + 对齐控制

用 inline-block 实现零缝隙拼接的最小代码

以下是最简可靠写法，兼容 Chrome 10+、Firefox 16+、Safari 12+：

<div class="search-group">
  <input type="text" class="search-input"><button type="submit" class="search-btn">搜索</button>
</div>
<p><style>
.search-group {
font-size: 0; /<em> 消除 inline-block 间空格 /
}
.search-input,
.search-btn {
font-size: 14px; /<em> 恢复字体大小 /
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
border: 1px solid #ccc;
vertical-align: top; /<em> 关键！不是 middle，top 更稳 /
display: inline-block;
}
.search-input {
width: 200px;
border-right: none; /<em> 右边框去掉，让按钮左框顶上来 /
}
.search-btn {
border-left: none; /<em> 左边框去掉，与输入框无缝 /
background: #007bff;
color: white;
}
</style></p>