HTML 的 input 和 button 标签之间出现缝隙通常是由 行内元素的空白间隙 引起的。以下是几种解决方法来去掉这些缝隙：
方法 1：将标签放在同一行
把 input 和 button 标签直接写在同一行，中间不要有任何空格或换行。
<input type="text" /><button>提交</button>
方法 2：使用 font-size: 0 解决空白间隙问题
父级容器设置 font-size: 0，然后对子元素重新设置字体大小。
<div style="font-size: 0;">
<input type="text" style="font-size: 16px;" />
<button style="font-size: 16px;">提交</button>
</div>
方法 3：使用 display: flex 布局
用 flexbox 布局可以很好地避免间隙问题。
<div style="display: flex;">
<input type="text" />
<button>提交</button>
</div>
方法 4：使用 margin 和 padding 调整
如果是因为默认样式导致的间隙，可以手动调整 margin 和 padding。
<input type="text" style="margin: 0; padding: 0;" />
<button style="margin: 0; padding: 0;">提交</button>
方法 5：使用负 margin
如果不想改变 HTML 结构，可以给 button 或 input 添加负 margin。
<input type="text" />
<button style="margin-left: -4px;">提交</button>
推荐方案
使用 display: flex 更现代且兼容性好。
例如：
<div style="display: flex;">
<input type="text" />
<button>提交</button>
</div>
评论