Google chrome does not add padding to width of input

Hi
I have problem with padding in chrome. I have input tag with background image that is 119px wide. I want to give input some padding so I would get this style:

input {
width:109px;
padding:0 5px; /*109px + 2 x 5px = 119*/
}

Code (markup):

but instead of adding padding to width I still have width 109px and I don't see full image. Width of input's container div is wide enough (when I change width of input to 119px I see whole image).

Is this a bug?
thanks
Tomas

 

Width is the area of the content. Padding surrounds the content. So padding never adds to 'width'. You may be misunderstanding how the 'box model' works but the problem may also lie with your attempt to style form elements which is not always possible.

 

maybe I expressed myself not correctly about "adding padding to width". But what is for sure, when you have element with width 109px and padding:0 5px; you should see whole background image of 119px length. When you set width and padding to an element, width of background of element is width + padding. if you have enough space horizontally.

how can I recognize in which circumstances is styling of inputs not possible? is there any tutorial where I can learn it? Or it is experience with bugs of browsers?

thanks for advise
Tomas

 

Yes, in that case it's probably a problem with styling form elements. Rather than go into all that, I'll try and find a link outlining the differences.