input标签和button放在一行写:inline元素的空白间隙问题

问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行，类似如下的效果:

我的css设置如下：

.same{    padding: 0;    margin: 0;    box-sizing: border-box;    border: 0;    height: 30px;}.div{    width: 300px;    height: 32px;    border: solid 1px #000000;}.text{    width: 80%;    background-color: rgba(147, 147, 147, 0.44);}.btn{    width: 20%;    background-color: #59b3f3;}

HTML代码如下所示:

<div class="same div">    <input type="text" class="same text"><button class="same btn">查询</button></div>

按照上面的写法能够实现上图的效果，但是请注意，input和button标签是写在一行的，如果分两行写：

<div class="same div">    <input type="text" class="same text">    <button class="same btn">查询</button></div>

CSS不变的话，最终效果就是如下:

在HTML中我并没有写换行符，并且样式都没有改，说明有其他东西占据了空间，经过在CSDN提问问题地址，我才发现原来inline元素其实也很复杂，需要很多需要注意的地方，现代浏览器中 inline 和 block 元素 display:inline-block 后均会产生水平空隙。 inline 元素默认就有空隙存在！它们是谁？是空白符（white space），具体内容可以看带你深入剖析inline-block属性值的前世今生这篇文章，写的十分详细。

解决办法有很多：

1. 写在一行
2. 在父元素div上加上 font-size:0
3. 使用浮动，input标签的display:block

以上，留下问题和解决办法防止忘记。