How come when I do this:
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
the input ends up 2 px wider than the div in both IE6 and FF3? What am I missing?
EDIT: As many people have said, the border is the issue. If I set border: 0px on the input, it will have the same width as the div with a 0 px border (verified by wrapping it inside a bordered SPAN).
However, when I measure the elements in paint, the div has a 14 px interior, just as expected (10+2+2). The input, however, has a 16 px interior, and then a border outside of that. Why is this? Probably not a bug since it happens in both IE6 and FF3, but I dont understand it.
I think you are forgetting about the border. Having a one-pixel-wide border on the Div will take away two pixels of total length. Therefore it will appear as though the div is two pixels shorter than it actually is.
The visible width of an element is width + padding + border + outline, so it seems that you are forgetting about the border on the input element. That is, to say, that the default border width for an input element on most (some?) browsers is actually calculated as 2px, not one. Hence your input is appearing as 2px wider. Try explicitly setting the border-width on the input, or making your div wider.
input width is 10 + 2 times 1 px for border
Source: Stackoverflow.com