Desde el principio los modelos de caja de CSS se han medido sumando las medidasd de width + padding + border, o bien, height + padding + border. Esto ocasionaba que se tuviera que ir sumando las medidas para calcular el tamaño exacto que queriamos que fueran nuestras cajas.

box-sizing :: Apareció para resolver todo estos problemas que ocasionaba los modelos de caja en CSS.

Hoy en día los navegadores usan el modelo de caja antes mencionado de width + padding + border, o bien, height + padding + border.Pero con box-sizing: border-box ;, podemos cambiar el modelo de caja, donde el ancho y la altura que especifiquemos de un elemento no se ven afectados por el padding o el border.

El valor content-box es para recuperar el modelo de caja originario.

padding-box:En este caso las propiedades width y height incluyen en padding pero no incluyen el border y el margin.

Se recomienda usar en nuestro CSS