2 conceptos con los que dominaras el modelo de caja

El modelo de caja representa a cada elemento HTML y esta conformado por cuatro propiedades:

• Margin
• Border
• Padding
• Dimensions

1. En el modelo de caja, ¿Cómo se identifica el ancho total de un elemento?
   En el modelo de caja, el ancho total se identifica sumando los valores de width, padding-left, padding-right, border-left-width, border-right-width.

• Ancho total = width, padding-left, padding-right, border-left-width, border-right-width.

Nota 1: Aunque margin-left y margin-right, forman parte del modelo de caja, no se incluyen para el calculo del ancho total.

Nota 2: De manera similar aplica para el alto total de cada elemento.

1. Con la propiedad box-sizing ¿Para que usamos el valor de border-box?
   La usamos para que nuestro elemento nunca supere el tamaño máximo que le hayamos definido en width y height.