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

以上，留下問題和解決辦法防止忘記。