如何去掉input和button标签中间有缝隙

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>