Cita:
Iniciado por walvaRo ¿Y por que empequeñece el div?
No es que lo haga más pequeño, resulta que el modelo de caja tradicional lo que hace es agrandar el elemento al añadirle un borde o un padding.
Un elemento de 200 pixeles con un borde de 1 pixel y un padding de 20 pixeles mide 200 + (1*2) + (20 * 2) =
242 pixeles. Se multiplica el borde y el padding por dos ya que hay dos laterales. Pero el contenido interior seguirá siendo de
200 pixeles.
Un elemento con
box-sizing: border-box con esas mismas medidas,
medirá 200 pixeles, pero el contenido interior, será de 200 - (1*2) - (20*2) =
158 pixeles. Puede ser a lo que tú le llamas
inside. Si el borde va hacia adentro, entonces tendrá que ocupar ese sitio adentro, ¿no?
Y en ambos casos el atributo
width del elemento está definido en 200 pixeles, pero sólo en el segundo caso ocupa realmente 200 pixeles en la pantalla.