Centered elements separated by a line break don't align correctly in Firefox
I'm building a login box where all of the content is centered. I have a paragraph of text, two form fields stacked on top of each other, and a button. The form fields have the same width and I'm stacking them simply by putting a line break (<code>&lt;br /&gt;</code>) between them.

Since the whole box has <code>text-align: center;</code> applied to it, you would think that the two form fields would line up exactly, right (one on top of the other with both edges aligned perfectly, since they're the same width)? However, in Firefox, the second form field is shifted over to the right by maybe 1 or 2 pixels.

What causes this? Does the line break itself take up a very small amount of space and therefore throw off the centering? If so, how do I prevent it?
Centered elements separated by a line break don't align correctly in Firefox
===

I'm building a login box where all of the content is centered. I have a paragraph of text, two form fields stacked on top of each other, and a button. The form fields have the same width and I'm stacking them simply by putting a line break (<code>&lt;br /&gt;</code>) between them.

Since the whole box has <code>text-align: center;</code> applied to it, you would think that the two form fields would line up exactly, right (one on top of the other with both edges aligned perfectly, since they're the same width)? However, in Firefox, the second form field is shifted over to the right by maybe 1 or 2 pixels.

What causes this? Does the line break itself take up a very small amount of space and therefore throw off the centering? If so, how do I prevent it?