input和button的缝隙兼容问题

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

在使用input框和button按钮时，两者之间会产生空隙

解决问题-缝隙问题

问题产生的原因：缝隙问题是有余标签之间的换行，产生的空白字符而导致的

1. 不换行

把input和button写在同一行，间隙消失（影响代码可读性，不推荐）

2. font-size字体为0

给父元素添加font-size：0px 样式

也可实现间隙消失的效果

3. 浮动

此时边距消失，但是会以上边框对齐

解决问题：高度问题

使用调试工具查看，可以发现button的总高度是设置的高度，在计算样式中查看button 的box-sizing,会发现结果为border-box,padding和border算在宽度和高度中，谷歌浏览器的box-sizing默认是content-box，也就是padding和border 不算在宽度和高度中

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