बटन इनपुट के साथ गठबंधन नहीं है (इनपुट के पैडिंग के कारण)

Question

नीचे दिया गया बटन इनपुट के साथ संरेखित नहीं है। इनपुट को बटन के समान ऊंचाई पर होना चाहिए, हालांकि इनपुट की पैडिंग संरेखण पर प्रभाव डालती है! पैडिंग-टॉप और पैडिंग-तल के बीच का अंतर बटन की इस शिफ्ट को बनाता है।

मैंने एक पहेली बना दिया: http://jsfiddle.net/3RMhm/10/ मेरा मतलब क्या है।

सीएसएस:

.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 जोड़ें।

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

Answer 2

उपयोग:

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

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

Answer 3

अपने .form वर्ग में, बस के लिए padding-top और padding-bottom मूल्यों को बदल:

.form { 

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

}