Entender la propiedad 'box-sizing' en CSS

La propiedad box-sizing en CSS es una herramienta poderosa y esencial para el control de layout en desarrollo web. Como se mencionó en la pregunta, esta propiedad dicta cómo se calculan las dimensiones de una caja en CSS.

En CSS, cada elemento se representa como una caja rectangular. Las dimensiones de esta caja se definen a través de las propiedades de anchura (width) y altura (height). Sin embargo, estas dimensiones pueden variar en función de la propiedad box-sizing.

¿Cómo funciona 'box-sizing'?

Existen dos valores que puedes asignar a la propiedad box-sizing: content-box y border-box.

• content-box: Este es el valor por defecto de CSS. Aquí, las propiedades width y height controlan el tamaño del contenido de la caja, pero no incluyen el padding (espacio interior), borde, ni el margen.

• border-box: Este valor altera el box model tradicional. Aquí, las propiedades width y height incluyen el contenido, el padding y el borde, pero no el margen. Es decir, si asignas un width de 200px a una caja con border-box, la suma del contenido, padding y borde nunca excederá los 200px.

Ejemplo práctico

Imagina que tienes un div con una anchura de 300px, un padding de 20px y un borde de 2px. Si el box-sizing está configurado como content-box, la anchura total de la caja sería 344px (300px de contenido + 2*20px de padding + 2*2px de borde). Sin embargo, si box-sizing se establece como border-box, la anchura total se mantendrá en 300px, el contenido se ajustará a 256px para dar espacio al padding y al borde.

Mejores prácticas

Usar border-box puede hacer tu CSS más intuitivo y flexible, especialmente en diseños responsivos. Muchos desarrolladores prefieren resetear todos los elementos a border-box al inicio de sus hojas de estilo para mantener todos los elementos consistentes.

Puedes lograr esto con el siguiente código:

*, *:before, *:after {
    box-sizing: border-box;
}

Esta práctica puede ayudarte a evitar problemas habituales con el ajuste de dimensiones, facilitando la creación de layouts precisos y consistentes.