Width of input type text element

Question

How come when I do this    lt input type  text  style  width  10px  padding  2px   gt   lt div style  width  10px  border  solid 1px black  padding  2px  gt  amp nbsp  lt  div gt    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

User · Answer

input width is 10   2 times 1 px for border

User · Answer

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

User · Answer

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

User · Answer

I believe that is just how the browser renders their standard input  If you set a border on the input    lt input type  text  style  width  10px  padding  2px  border  1px solid black   gt   lt div style  width  10px  border  solid 1px black  padding  2px  gt   lt  div gt    Then both are the same width  at least in FF

[html] Width of input type=text element

Examples related to html

Examples related to css

Examples related to input

Examples related to width