ボタンが入力と揃っていない（入力のパディングのため）

Question

下のボタンが入力と揃っていません。 入力がボタンと同じ高さになければなりませんが、入力のパディングがアラインメントに影響するようです！パディングトップとパディングボトムの違いは、このボタンの移動を作成することです。

私はフィドルを作りました：http://jsfiddle.net/3RMhm/10/私は何を意味するかを示します。

CSS：

.button { 
    font-size: 15px; 
    padding: 9px 23px; 
    border:0; 
} 
.form { 
    width: 290px; 
    background-color: #F9F9F9; 
    font-size: 18px; 
    color: #333; 
    height: 25px; 
    border:1px solid darkgray; 
    padding-top: 15px;   <--- This padding 
    padding-bottom: 0px;  <--- And this padding 
} 

HTML：

<input name="name" class="form" /> 
    <input class="button" type="submit"> 

Answer 1

ただ、両方の要素（ボタンや入力）にvertical-align: middleを追加します。あなたの.formクラスで

http://jsfiddle.net/3RMhm/3/

Answer 2

用途：

vertical-align:middle; 
margin-top: -5px; 

http://jsfiddle.net/Hive7/3RMhm/2/

Answer 3

だけにpadding-topとpadding-bottomの値を変更します。

.form { 

    padding-right: 4px; 
    padding-bottom: 8px; 

}