input与button输入框 间隙问题

发现问题

在开发中经常会遇到搜索框组，即一个input输入框和一个button点击搜索框，由于浏览器的解析原因，我想知道但是我没有找到答案，会出现即使是同样的高度，视觉上input组并没有在一条水平线上，以及会出现水平距离上的缝隙。

解决问题

水平缝隙

水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙，解决的方式有很多，我常用：既然是字符，那么把font设置为0，就解决了。

还有就是书写的时候不换行，当然这样看上去会很别扭，我是不用的。

垂直缝隙

• bootstrap里有一个输入框组建，我研究了他的代码。按照我的理解，按照标准行内元素span最好不要包裹块级元素，这样做的目的，我暂时没有理解，并且去掉span，依旧可以得到正确的样式。
  
  +设置普通样式，父元素设置高为30px; input框高为30px；按钮高为30px；
  

  由于button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部（button的高度包含边框的高度，而文本框text则不包含边框高度）所以给input框设置box-sizing属性，达到统一高度为30px；

• 可以看到input上方的缝隙，原因我暂时不知道，但是解决方式很简单，float可以让整个元素脱离文档流，尽可能的窄，也就是只占据自己的位置，只需要加上float：left就可以解决这个问题了。