¿Cómo afecta la propiedad box-sizing al tamaño del elemento?

La propiedad CSS box-sizing determina cómo se calculan las dimensiones de un elemento, incluyendo o no los márgenes internos (padding) y los bordes (border).

• Valor content-box (por defecto): el ancho y la altura del elemento solo definen el contenido. Los márgenes internos y los bordes se añaden a estos tamaños, aumentando el tamaño total del elemento.

• Valor border-box: el ancho y la altura incluyen el contenido, los márgenes internos y los bordes. Esto significa que si se establece un ancho de 100px, el contenido se reducirá considerando el padding y el border para que el tamaño total siga siendo 100px.

Ejemplo:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

En este caso, el elemento .box tendrá un ancho total de 200px, incluyendo padding y border. Si fuera content-box, el ancho total sería 200 + 210 + 25 = 230px.

Usar border-box a menudo simplifica el diseño, ya que los tamaños de los elementos no "se descontrolan" por el padding y el border.