Nút không phù hợp với đầu vào (do đệm đầu vào)

Question

Nút dưới đây không căn chỉnh với đầu vào. Đầu vào phải ở cùng độ cao với nút, mặc dù phần đệm của đầu vào dường như có ảnh hưởng đến căn chỉnh! Sự khác biệt giữa padding-top và padding-bottom tạo ra sự dịch chuyển của nút này.

Tôi đã viết: http://jsfiddle.net/3RMhm/10/ để hiển thị ý của tôi.

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

Chỉ cần thêm vertical-align: middle để cả hai yếu tố (nút và đầu vào).

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

Answer 2

Sử dụng:

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

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

Answer 3

Trong lớp .form của bạn, chỉ cần thay đổi padding-top và padding-bottom giá trị đến:

.form { 

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

}