¿Cómo afecta la propiedad box-sizing: border-box al cálculo del tamaño de un elemento?

La propiedad box-sizing en CSS permite controlar cómo se calcula el tamaño total de un elemento, específicamente cómo se tienen en cuenta sus propiedades padding (relleno) y border (borde) en relación con el width (ancho) y height (alto) que le asignas.

Existen dos valores principales para box-sizing:

1. content-box (valor por defecto):
   • Cuando box-sizing está establecido a content-box (o si no se especifica, ya que es el valor predeterminado en CSS), las propiedades width y height que defines se aplican únicamente al área de contenido del elemento.
   • El padding y el border se añaden por fuera de estas dimensiones.
   • Por lo tanto, el ancho total visible del elemento en la página será: width + padding-left + padding-right + border-left-width + border-right-width.
   • Esto puede hacer que los cálculos de layout sean complicados, especialmente si trabajas con porcentajes, ya que añadir padding o border a un elemento con width: 50%; hará que ocupe más del 50% del espacio de su contenedor.
2. border-box:
   • Cuando aplicas box-sizing: border-box; a un elemento, el comportamiento cambia significativamente:
   • Las propiedades width y height que defines incluyen el padding y el border del elemento.
   • En lugar de sumarse por fuera, el padding y el border se aplican hacia el interior del elemento, «robando» espacio al área de contenido si es necesario para mantener el width y height totales que has especificado.
   • Por lo tanto, el ancho total visible del elemento en la página será exactamente el valor que hayas definido para width. Lo mismo aplica para height. (El margin siempre se calcula por fuera de estas dimensiones).

Ejemplo de la diferencia:

.caja {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid red;
  margin: 10px;
}

.caja-content-box {
  box-sizing: content-box; /* Por defecto */
  /* Ancho total real: 200px (width) + 40px (padding) + 20px (border) = 260px */
}

.caja-border-box {
  box-sizing: border-box;
  /* Ancho total real: 200px (width ya incluye padding y border) */
}Lenguaje del código: PHP (php)

¿Cómo afecta border-box al cálculo y por qué es útil?

• Layout más intuitivo: Con border-box, si defines width: 200px;, sabes que el elemento ocupará exactamente 200px de ancho en la pantalla, sin importar el padding o border que le añadas después. Estos se acomodarán dentro de esos 200px.
• Facilita el trabajo con porcentajes y sistemas de cuadrícula: Es mucho más fácil crear columnas que sumen el 100% del ancho de su contenedor, ya que puedes añadir padding y border a esas columnas sin que excedan el porcentaje de ancho asignado.
• Práctica común: Debido a estas ventajas, muchos desarrolladores consideran una buena práctica aplicar box-sizing: border-box; globalmente a todos los elementos al inicio de sus hojas de estilo, de esta forma:
  html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit; /* Hace que todos los elementos hereden de html */
}

En resumen, box-sizing: border-box; simplifica el modelo de caja, haciendo que el width y height definidos sean más representativos del espacio final que ocupará el elemento, lo que lleva a un CSS más predecible y fácil de gestionar.