La propiedad box-sizing

Y otras particularidades del modelo de cajas


—— ——

Aunque el concepto del modelo de cajas de CSS es sencillo, hay varios detalles que es interesante conocer antes de continuar. En muchas ocasiones, trabajar con los tamaños de varios elementos puede resultar frustrante, ya que es muy habitual que ocurran ciertas situaciones inesperadas.

El tamaño de las cajas

Por defecto, el modelo de cajas de CSS sigue un esquema donde al dar un tamaño a un elemento, concretamente se le da tamaño a su contenido, de modo que si además le añadimos un borde (border) y/o un relleno (padding), se sumará al tamaño indicado previamente.

Esto puede resultar algo poco intuitivo, ya que un elemento de tamaño width: 200px, con un border: 15px y un padding: 20px, tendría en realidad un tamaño total de 270px (15px + 15px de borde izquierdo y derecho, 20px + 20px de relleno izquierdo y derecho y los 200px del contenido). Tener que realizar estos cálculos, puede resultar complejo y poco predecible, especialmente en situaciones donde estamos muy justos de espacio.

La propiedad box-sizing

En CSS, existe una propiedad denominada box-sizing que permite alterar esta versión del modelo de cajas. Lo explicado en el ejemplo anterior es el funcionamiento por defecto del modelo de cajas de CSS, y el valor content-box de la propiedad box-sizing, que obviamente, es el valor por defecto:

Valor Descripción
content-box Las propiedades width y height no incluyen borde, relleno y/o margen. Valor por defecto.
border-box Las propiedades width y height incluyen borde y relleno.

Sin embargo, tiene disponible otro valor denominado border-box donde se puede cambiar el comportamiento de este modelo de cajas por uno simplificado donde el tamaño del border y del padding están incluídos en el tamaño del contenido dados por propiedades como width o height.

Veamos un ejemplo donde utilizaremos:

  • Tamaño width y height de 200px.
  • Borde de 15px por cada lado.
  • Relleno de 20px por cada lado.

Propiedad box-sizing

Observa que en el caso de la izquierda, donde usamos box-sizing: content-box (modelo por defecto), los tamaños de borde y de relleno se suman al dado por anchos y altos, por lo que el tamaño total del elemento será de 270px.

Sin embargo, en el caso de la derecha, box-sizing: border-box, los tamaños de borde y de relleno se restan al tamaño dado por anchos y altos, por lo que el tamaño total del elemento será de 200px, sin embargo, el tamaño disponible para el contenido es de 130px (200px - 15px - 15px - 20px - 20px).

Reseteos de CSS

Aunque cada vez es menos frecuente, simplificar los cálculos del desarrollador con box-sizing o la necesidad de eliminar el margin en el body o en elementos de encabezado h1, h2, etc. han hecho que muchos programadores decidan utilizar reseteos que eliminen estas particularidades de todos los navegadores y hagan que sea más fácil de escribir CSS.

Tradicionalmente, han habido muchos sistemas de reset en CSS, pero sólo algunos se han quedado hasta estos días. Citaré los que creo que son más conocidos y relevantes:

Sistema de reseteo Descripción
Reset CSS El reset de Eric Meyer, históricamente, quizás el primero.
Normalize.css Uno de los reset más tradicionales y populares.
A Modern CSS Reset El reseteo CSS de Andy Bell.
A CSS Reset for 2022 CSS Reset 2022 de Mayank99
CSS Remedy CSS Remedy, de Jen Simmons
Josh W. Comeau Un reset moderno, explicado paso a paso.

Utilizar un sistema de reset CSS es decisión del desarrollador y no es algo obligatorio. En algunos casos, quizás pueda ayudar a que el desarrollador realice pasos en sus diseños de forma mucho más intuitiva.

El «Margin Collapse»

Otro detalle que merece la pena destacar, y que sorprende mucho en el aprendizaje del modelo de cajas de CSS, es el llamado «margin collapse» o colapso de márgenes.

Como veremos más adelante, CSS tiene varios mecanismos de maquetación. Los más básicos son inline y block, y en ellos, ocurre la siguiente situación. Imaginemos que tenemos dos elementos adyacentes, y cada uno de ellos, tiene un margen de 20px definido.

Quizás, lo más intuitivo es pensar que que el elemento de la izquierda tiene 20px de margen derecho, mientras que el elemento de la derecha tiene 20px de margen izquierdo, que al sumarse, predecimos que resultará un tamaño de 40px. Sin embargo, la realidad es distinta:

Margin collapse

El margin collapse se refiere a que en estos modelos de maquetación básica, los márgenes de dos elementos se colapsan, ocupando el tamaño una sola vez. En el ejemplo anterior, ocupa sólo esos 20px, en lugar de 40px.

En modelos de maquetación avanzados como flex o grid no se aplica el «margin collapse», ya que es algo que sólo afecta a modelos básicos como inline o block.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev