Tarea

Exploremos las diferencias prácticas entre los valores content-box y border-box para la propiedad box-sizing. Su tarea es la siguiente:

• Aplicar el valor content-box a la propiedad box-sizing para el elemento con el id content-box.
• Aplicar el valor border-box a la propiedad box-sizing para el elemento con el id border-box.

• box-sizing: content-box: El ancho y la altura excluyen el relleno y el borde.
• box-sizing: border-box: El ancho y la altura incluyen el relleno y el borde.

Explicación

En este ejemplo, hay dos elementos div, cada uno utilizando un valor diferente para la propiedad box-sizing:

• El primer div tiene un borde rojo y emplea el valor predeterminado content-box para la propiedad box-sizing. Aunque se establecen el width y height en 200px, el padding y el border agregan espacio adicional, resultando en dimensiones mayores a 200px en ambas direcciones;
• Por otro lado, el segundo div muestra un borde azul y utiliza border-box como valor para la propiedad box-sizing. Mientras que el width y height permanecen en 200px, el padding y el border están incluidos dentro de las dimensiones de la caja.

Se pueden observar los tamaños contrastantes de las dos cajas, siendo la primera más grande debido al espacio adicional de padding y border. En cambio, la segunda caja mantiene un tamaño constante de 200px, incluyendo el padding y el border.