Duda con padding y width de un div

[LhaN]

Buenas, tengo un problemita, resulta que el firefox 5 hay un div con un padding y un width que se comporta de forma extraña y por extraño que paresca en el IE8 funciona como debe ser.

Resulta que necesito hacerle un "marco" a una imagen. La imagen es de 250x100, debajo de la imagen hay texto centrado. Por lo tanto lo importante es que el "marco" quede en funcion del tamaño de la imagen, el marco debe de ser de 5px, por lo que use el padding = 5px; ademas como la imagen es de 250 de ancho le mande logicamente al div un width=260 (250 de la imagen mas 5 de cada lado por el padding).

Pero resulta que el div me queda de 270 de ancho (260 del width mas los 5 de cada lado del padding)... se supone que el padding se suma al tamaño final del width?????

[fedesilva]

El modelo de css establece que el padding de cada elemento se suma al ancho total. Entonces si tienes un elemento de 150px de ancho y le agregas padding de 5px a la izquierda y a la derecha, te quedará de 160px.

Tu lo hiciste al revés, y en realidad el que se comporta "mal" es internet explorer que no respeta los estándares de css.

[fedesilva]

Lo que puedes hacer para que te funcione igual en todos los navegadores es en lugar de agregarle padding al contenedor, agregarle margen a la imágen. Entonces el div quedaría del mismo tamaño.