18

How come when I do this:

<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px">&nbsp;</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.

Improve this question

4 Answers 4

Reset to default
20

I believe that is just how the browser renders their standard input. If you set a border on the input:

<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>

Then both are the same width, at least in FF.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you. It appears that it actually is a 2px border, but just visually looks as 1px.
4

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.

Improve this answer

2 Comments

Do you mean margin when you say outline, or is outline a new concept that I've never heard of?
Read about outline here: quirksmode.org/css/outline.html It says it does not count towards the width of the box, which is true, but it does change the visible width.
0

input width is 10 + 2 times 1 px for border

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

No! Width + Border = actual width! So the input element is appearing larger.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.