¿Qué es la propiedad box-sizing: border-box y qué papel desempeña en CSS?

La propiedad box-sizing determina cómo se calcula el ancho y la altura totales de un elemento.

box-sizing: content-box (valor predeterminado) — el ancho y la altura solo se refieren al contenido (content). El padding y border se añaden a los valores especificados de ancho/altura.

box-sizing: border-box — el ancho y la altura incluyen padding y border. El content se comprime para ajustarse dentro de los anchos/alturas especificados.

El papel de box-sizing: border-box en CSS:

• Simplificación de cálculos: Facilita el cálculo de los tamaños de los elementos, especialmente al usar padding y border.
• Previsibilidad en el diseño: Permite establecer con precisión los tamaños de los bloques, independientemente de padding y border, haciendo que el diseño sea más predecible.
• Comodidad en el modelo de caja: Se ajusta a la comprensión intuitiva del tamaño del bloque — sus bordes. Facilita la creación de rejillas y componentes de tamaño fijo.

Ejemplo:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Ancho total = 100 + 10*2 + 1*2 = 122px */
  /* Altura total = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Ancho total = 100px */
  /* Altura total = 100px */
  /* El contenido ocupará 100 - 10*2 - 1*2 = 78px en ancho y alto */
}