¿Qué es content Box en CSS?

content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.

¿Cuál es la diferencia entre border box y Content Box?

Como podemos ver, content box se refiere al área que ocupa el contenido del elemento, y border box se refiere al tamaño completo del elemento, incluyendo su padding y borde. Cuando definimos la propiedad box-sizing, le decimos al browser a cuál de estas cajas debe aplicar las propiedades width y height de nuestra regla de estilo.

¿Qué es border-box y para qué sirve?

border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra.

¿Qué es el border box en CSS?

El border box sirve para evitar lo anterior, si tu necesitas que el elemento mida exactamente lo que especificaste en el width y height (100px x 120px respectivamente), con el valor border-box lo puedes hacer. Border box hace que los elementos mantengan su tamaño y se usa precisamente para que el box model no se rompa.