CSS怎样实现搜索框与按钮的无缝对接布局_利用Flex布局消除元素间间隙-css教程-PHP中文网

搜索框和按钮间缝隙源于html空白符渲染，flex布局通过display: flex使子元素脱离文本流消除间隙；需设gap: 0、统一尺寸、避免vertical-align及font-size: 0等干扰。

css怎样实现搜索框与按钮的无缝对接布局_利用flex布局消除元素间间隙

搜索框和按钮之间为什么总有缝隙

默认情况下，<input> 和 <button></button> 作为内联元素（或 inline-block）在行内排列时，HTML 中的换行符、空格会被渲染为一个空格宽度，导致视觉上出现约 4px 的间隙。这不是 margin 或 padding，而是文本渲染行为本身造成的。

用 Flex 布局消除间隙的关键设置

把父容器设为 display: flex 后，子元素不再参与文本流，天然忽略空白符。但要注意几个细节：

父容器必须显式设置 display: flex，不能只靠 inline-flex（后者宽度不占满，容易引发对齐问题）
避免给子元素设 vertical-align —— Flex 下该属性无效，还可能干扰调试
如果按钮高度和输入框不一致，优先统一 height 或 line-height，而不是依赖 align-items: center（它只对 flex 项目起作用，但无法修正盒模型差异）
禁用 font-size: 0 这类“黑魔法”：虽然能消灭空白，但会继承影响子元素字体，得额外重置，反而更难维护

完整可复用的 HTML + CSS 示例

<div class="search-group">
  <input type="text" placeholder="搜索..."><button type="submit">搜索</button>
</div>

对应 CSS：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.search-group {
  display: flex;
  gap: 0; /* 显式声明，避免某些浏览器默认 gap */
}
.search-group > input,
.search-group > button {
  border: 1px solid #ccc;
  padding: 8px 12px;
  margin: 0; /* 确保无外边距干扰 */
  box-sizing: border-box;
}
.search-group > input {
  flex: 1; /* 自动撑满剩余空间 */
}
.search-group > button {
  width: 60px; /* 固定宽度更可控 */
}