<input> has mysterious bottom padding

Question

I am trying to do some quite precise styling on some form elements, and this issue is causing me a lot of grief.

If I try to remove padding, margi

Answer 1

I know I'm months late to this question, but I ran across it in a Google search and wanted to add one thing that might help clarify some of the other answers with regard to the elements in Firefox.

The default form styling in Firefox includes some awkward CSS:

input {
   ...
   line-height: normal !important;
   ...
}

This makes it effectively impossible to override the line-height property of any form input in Firefox. The problem has existed for years, and while it seems like a no-brainer for the FF devs to remove the !important from the rule, I gather there are some under-the-hood implementation problems with doing so. Also, apparently there are some websites (including YouTube) that rely on the behavior of this rule.

For details and lots of discussion see Mozilla bug #349259. There's also a good blog post on this at 456bereastreet.com, and another (older) by Eric Meyer at meyerweb.com.