css - input间的间距和文字上下居中-PHP中文网问答

使用环境：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？？