html中上下input间距,css - input间的间距和文字上下居中

使用环境：debian8 + firefox-45.8

请看：

css

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }

.left { width:420px;height:30px; }

.search_btn { width:70px; height:30px; line-height:30px; }

显示效果

这里有两个问题：

1。submit中的文字无法上下居中

设置了vertical-align:middle;无法让文字 “搜索”上下居中

“搜索”两个字偏靠下

2。两个input的间距问题

有一种解释，空格也占据空间。

下面修改一个html结构，发现间距确实变小了一点，但是，为何仍旧没有消失。

css不变，显示效果如下：

为何还有间距？已经设置了padding:0px;margin:0px; ？

对input.left增加border ,将css修改为：

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }

.left { width:420px;height:30px;border:1px solid red; }

.search_btn { width:70px; height:30px; line-height:30px;}

间隙还在。

再对input.search_btn增加border

* { box-sizing:border-box;padding:0px;margin:0px;vertical-align:middle;font-size:12px; }

.left { width:420px;height:30px;border:1px solid red; }

.search_btn { width:70px; height:30px; line-height:30px;border:1px solid red; }

间隙消失

请：1。如何将文字上下居中

2。如何详细解释问题2？？