How can I remove the extra, and different pseudo-padding on text inputs in Webkit and Gecko?

Question

The problem only happens on input[type="text"] in Webkit. No matter what I do, there is the equivalent of an extra padding: 1px 0 0 1px (top and left only) on the element.

A similar problem happens in Gecko, input[type="text"] has an equivalent extra padding: 1px 0 0 1px and input[type="button"] has an extra padding: 1px 0 0 0.

Here's a JSFiddle showing you everything I've tried, and nothing works: http://jsfiddle.net/PncMR/10/

Interestingly, when you set the line-height of all the elements to 0 ( http://jsfiddle.net/PncMR/11/ ), the only unaffected elements are the ones with the problems, so I'm assuming that the browser is defaulting to a specific line-height, and I'm now looking for a way to override it.

---

I've found nothing in the webkit base styles that would do this, but feel free to check yourself:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

This is not a moz-focus-inner problem, or an appearance: none problem, or a box-sizing problem, or an outline problem and I can't find any other solutions.

---

Edit: See my answer below for the vertical padding problems, but I'm still looking for a solution to the extra padding-left: 1px equivalent on text-inputs only in webkit and gecko. ( http://jsfiddle.net/PncMR/14/ )

Answer 1

In Webkit

The extra vertical "padding" on input[type="text"] in Webkit is because you cannot give text inputs a line-height value of less than normal, which isn't a specific value, but varies depending on the typeface.

I know this is the cause, but I cannot find where the input would be getting this style, because it doesn't appear in the Webkit UA stylesheets.

In Gecko

The extra vertical "padding" on input[type="text"] and input[type="button"] in Gecko is due to user-agent stylesheet containing:

input {
    line-height: normal !important;
}

and !important declarations in the user-agent stylesheet cannot be overidden in any way.

Conclusion

You can't go under line-height: normal in Webkit, and you can't have anything other than line-height: normal on these elements in Gecko, so the best solution is to always style these elements with line-height: normal to get the best consistency, which isn't really a nice solution. Ideally, we'd be able to override all UA styles.

---

Neither of these account for the extra 1px of what acts like text-indent that only appears on input[type="text"] in both rendering engines.

---

People who care about this, should voice their opinions on these two Bugzilla threads:

• https://bugzilla.mozilla.org/show_bug.cgi?id=697451
• https://bugzilla.mozilla.org/show_bug.cgi?id=349259