input & button对不齐、有间隙、高度不一致等问题解决方法

1.input和button对不齐的原因

对不齐是因为行内元素的基线是不同的，所以会导致高低不同。
解决办法：每一个元素都加上下面即可；

vertical-align:middle;

如下

.content{
    width:200px;
    height:30px;
    vertical-align:middle;
}
.btn{
    width:80px;
    height: 30px;在这里插入图片描述
    vertical-align:middle;
}

<input type="text" class="content">
<button class="btn">提交</button>

效果如下：

2.input和button高度不一致的原因

button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部。button的高度包含边框的高度，而文本框text则不包含边框高度。这就导致input高度会比button高两像素。
解决方法：

• 就是给input加上

box-sizing: border-box;

• 或者给button加上

box-sizing: content-box;

如下

 .btn{
            width:80px;
            height: 30px;
            vertical-align:middle;
            box-sizing: content-box;
        }

效果如下：

3.input和button有间隙的原因

水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙。
解决方法：两个标签不换行即可
如下

<input type="text" class="content"><button class="btn">提交</button>

效果如下：