The button below is not aligning with the input. The input has to be on the same height as the button, though the padding of the input seems to have a influence on the alignment! The difference between padding-top and padding-bottom creates this shift of the button.
I made a fiddle: http://jsfiddle.net/3RMhm/10/ to show what I mean.
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">
Just add vertical-align: middle
to both elements (button and input).