搜索框和按钮间缝隙源于HTML空白符渲染，Flex布局通过display: flex使子元素脱离文本流消除间隙；需设gap: 0、统一尺寸、避免vertical-align及font-size: 0等干扰。
搜索框和按钮之间为什么总有缝隙
默认情况下，
和
作为内联元素（或 inline-block）在行内排列时，HTML 中的换行符、空格会被渲染为一个空格宽度，导致视觉上出现约 4px 的间隙。这不是 margin 或 padding，而是文本渲染行为本身造成的。
用 Flex 布局消除间隙的关键设置
把父容器设为
后，子元素不再参与文本流，天然忽略空白符。但要注意几个细节：
父容器必须显式设置
，不能只靠
（后者宽度不占满，容易引发对齐问题）
避免给子元素设
—— Flex 下该属性无效，还可能干扰调试
如果按钮高度和输入框不一致，优先统一
或
，而不是依赖
（它只对 flex 项目起作用，但无法修正盒模型差异）
禁用
这类“黑魔法”：虽然能消灭空白，但会继承影响子元素字体，得额外重置，反而更难维护
完整可复用的 HTML + CSS 示例
对应 CSS：
IE11 兼容性与 fallback 注意点
Flex 在 IE11 中支持有限：
完全不支持，
表现也不稳定。如需兼容，建议：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
用
替代简写
去掉
，改用
在按钮上微调（前提是边框为实线且同色）
避免使用
配合不同
的组合——IE11 下高度计算容易出错
测试时重点关注按钮是否被截断，IE11 对
的解析在 flex 子项中偶有偏差
真正麻烦的不是写法，而是当父容器有
变化、或内部混用
单位的 padding 时，那些看似无关的样式会悄悄破坏 flex 对齐。建议搜索框组件内部所有尺寸都用
或
固定。
display: flexdisplay: flexinline-flexvertical-alignheightline-heightalign-items: centerfont-size: 0
.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; /* 固定宽度更可控 */
}gapflex: 1flex: 1 1 0flex: 1gapmargin-left: -1pxalign-items: stretchpaddingbox-sizing: border-boxfont-sizeempxrem