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:

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.

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:

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:

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.