In Chrome user agent stylesheet, how does 2px = 0em?

I ran into this issue as well - setting an explicit height fixed the issue.

The reason:

"*The purpose of intrinsic margins is to try to prevent adjacent controls from butting up against one another. Especially with rounded controls this looks terrible. The reason you see the values change is that we only set intrinsic margins when we think it won't disrupt the layout of the page. If the author specifies an explicit height/width on the control, then we assume the designer is needing pixel-precise control, and so we turn the margins off to avoid disrupting the page layout.

This feature was originally motivated by cases like Google's front page, which had two buttons that butted right up against one another. They have spacing now on the modern version of the page, but in the past they did not. This happens all over the place on the Web as well, especially with text fields next to buttons. They end up looking terrible on OS X especially (they look bad on Windows too, just not quite as bad).*"

Source: http://code.google.com/p/chromium/issues/detail?id=128306

From that screen shot, it looks like there is a rule like:margin: 2px 2px 4px 2px that is overriding what the user agent originally spec'd as 0em