There are a couple of obscure rules to keep in mind when we try to stylize our form elements with CSS. The first, and most obvious, is that form elements are not reviewed in any CSS specification. In other words, form elements are supposed to be inline-block and block elements depending on their type, but the final rendering of each element is up to every single browser. That is, what we recognize as a text field or a submit button (their visual layout) is a mere convention. So be aware of this fact. The second point is that form elements dimensions most rely on the actual font type and size used on each element. In other words, a text field that uses a 16 pixels Verdana font will be different from another text field that uses Arial as its font. Because of this, I often normalize some form elements with the following declaration:
input, select {
font: 1em Verdana, sans-serif;
}
In this case we're assuming that our page uses a Verdana font. So far so good. But things get more complicated when we try to apply stated dimensions to form elements. The main problem is related to the height declaration on input and select elements. Sometimes we want to apply a background image to a text field or a submit button. The best way to achieve this goal is using padding instead of height, because height causes some weird inconsistencies in some browsers. Obviously you have to balance the amount of padding until you get the desired result.
Further, it's better to use float to horizontally align elements instead of relying on the vertical-align and line-height calculations, because browsers apply different algorithms on form elements, while they tend to stick to the specifications if you use floats (provided that you take into account some obtuse bug of Internet Explorer 6 with floats).