Pulsante non allineato con l'input (a causa del padding di input)

Question

Il pulsante sottostante non si allinea con l'ingresso. L'input deve essere sulla stessa altezza del pulsante, sebbene il padding dell'ingresso sembra avere un'influenza sull'allineamento! La differenza tra padding-top e padding-bottom crea questo spostamento del pulsante.

Ho fatto un violino: http://jsfiddle.net/3RMhm/10/ per mostrare cosa intendo.

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

Basta aggiungere vertical-align: middle di entrambi gli elementi (pulsanti e di ingresso).

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

Answer 2

Usa:

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

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

Answer 3

Nella classe .form, basta cambiare padding-top e padding-bottom valori:

.form { 

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

}