input和button之间的缝隙问题与高度对齐问题

本文链接：https://blog.youkuaiyun.com/weixin_43465508/article/details/129589581

文章讨论了HTML中input和button元素之间出现缝隙的原因，这通常由于换行产生的空白字符造成。解决方案包括不换行编写标签、设置父元素font-size为0、使用浮动或定位。此外，还提到了input默认的content-box盒模型导致其高度可能低于设置了border-box的button。修复方法是统一设置box-sizing为border-box并调整尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缝隙问题

可以看到input和button之间有一个间距

缝隙原因

标签之间的换行，产生的空白字符导致的

解决方法

不换行，把input和button放在一起

<input type="text"><button>点击</button>

font-size设置为0

父元素的字体设置为0

body{
font-size:0;
}

浮动

input{

float:left;}
button{
float:left;
}

定位和外边距

 button{
            margin-left: -2px;
        }

高度问题

input会比button矮一点,因为在计算样式中查看

button里有box-size：border-box,

input没有定义样式box-size

谷歌默认content-box

所以input就会比button矮

box-size属性值

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

解决方法：

input,button{
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    vertical-align: middle;
}