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

1.input和button对不齐的原因对不齐是因为行内元素的基线是不同的，所以会导致高低不同。
解决办法：每一个元素都加上vertical-align:middle;即可

.text111{width:200px;height:30px;vertical-align:middle;}
.btn111{width:80px;height:30px;vertical-align:middle;}

<input type="text" class="text111"/>
<button class="btn111">提交</button>

效果如下：
提交\

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

	解决方法①：给input加上box-sizing:border-box;

	解决方法②：给button加上box-sizing:content-box;

.text111{width:200px;height:30px;vertical-align:middle;box-sizing:border-box;}

效果如下：
 提交

 

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

效果如下：
 提交

3.input和button有间隙的原因水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙。

	解决方法：两个标签不换行即可
<input type="text" class="text111"/><button class="btn111">提交</button>

效果如下：
提交