有关input[text]与button的错位问题

有如下代码

<style>
.search-box {overflow: hidden;}
.search-box input,.search-box button{border:none;padding:5px;}
.search-box input{border:2px solid #518a78;width:500px;height:20px;}
.search-box button{width:60px;height:34px;background: #518a78;}
</style>
<div class="search-box">
    <input type="text" value="">
    <button class="btn">提交</button> 
</div>

上述代码展示结果

如何去除两个元素之间的空格呢，我所知的方法有两种。
1、在父元素的样式内加上font-size: 0，即：.search-box {overflow: hidden;font-size: 0}
2、将元素之间的空格去除，即<input type="text" value=""><button class="btn">提交</button>

效果如下图：

感觉有点错位了，再两个元素的样式上加上vertical-align: top，即

.search-box input,.search-box button{border:none;padding:5px;vertical-align: top;}

效果如图：

希望能帮到大家。