Modelo de cajas

Modelo de cajas: Márgen, borde, relleno y contenido


Cuando hablamos del modelo de cajas en CSS, estamos haciendo referencia a un sistema que tiene el navegador de interpretar las diferentes partes de lo que solemos denominar «caja»: un elemento HTML con unas ciertas dimensiones.

¿Qué es el modelo de cajas?

La representación básica del modelo de cajas se basa en varios conceptos importantes, como veremos a continuación:

  • El borde (border), en negro, es el límite que separa el interior del exterior del elemento.
  • El márgen (margin), en naranja, es la parte exterior del elemento, por fuera del borde.
  • El relleno (padding), en verde, es la parte interior del elemento, entre el contenido y el borde.
  • El contenido, en azul, es la parte interior del elemento, excluyendo el relleno.

Márgenes y espaciados

Como veremos, cada una de estas partes del modelo de cajas de CSS se puede alterar, cambiando sus dimensiones, colores, etc. Así pues, cada elemento HTML tendrá su propio borde, margen, relleno y contenido.

Dimensiones (ancho y alto)

Para dar tamaños específicos a los diferentes elementos de un documento HTML, necesitaremos asignarles valores a las propiedades width (ancho) y height (alto):

Propiedad Valor Significado
width auto | Tamaño de ancho de un elemento.
height auto | Tamaño de alto de un elemento.

En el caso de indicar el valor auto a dichas propiedades, el navegador se encargará de darle el tamaño apropiado, dependiendo de su contenido. Ten en cuenta que este valor es el que tienen por defecto estas propiedades. De no indicar un valor concreto, width y height tienen establecido el valor auto.

Es importante recalcar que el tamaño automático dado a un elemento depende del tipo de elemento (bloque, en línea...). Este tema lo veremos en un capítulo posterior.

Hay que ser muy conscientes de que, sin indicar valores de ancho y alto para una caja, el elemento generalmente toma el tamaño que debe respecto a su contenido, mientras que si indicamos un ancho y alto concretos, estamos obligando mediante CSS a tener un aspecto concreto y podemos obtener resultados similares al siguiente (conocida broma de CSS) si su contenido es más grande que el tamaño que hemos obligado a tener:

CSS is awesome

Rango de dimensiones

Otra forma de lidiar con esto, es utilizar las propiedades hermanas de width: por un lado, min-width y max-width y por otro, sus equivalentes de height: min-height y max-height.

Propiedad Valor Significado
max-width none | Ancho máximo que puede ocupar un elemento.
min-width 0 | Ancho mínimo que puede ocupar un elemento.
max-height none | Alto máximo que puede ocupar un elemento.
min-height 0 | Alto mínimo que puede ocupar un elemento.

Con estas propiedades, en lugar de establecer un tamaño fijo, establecemos unos rangos máximos y mínimos, donde el ancho o alto podría variar entre esos valores:

div {
  width: 100%;
  min-width: 300px;
  max-width: 800px;
  height: 200px;
  background: red;
}
<div></div>

En este caso, puedes probar a redimensionar la ventana de demostración (esquina inferior-derecha). Hemos definido un tamaño máximo de ancho de 800px, y un mínimo de 300px. A la misma vez, le aplicamos un width de 100% para que intente ocupar el máximo posible, siempre respetando los límites anteriores: nunca superará los 800px y nunca será más pequeño de los 300px.

Como resultado, el cuadrado será flexible y se irá haciendo más pequeño hasta llegar a su límite inferior, donde aparecerá la barra de desplazamiento inferior.

Ojo: Las propiedades de mínimos min-width y min-height por defecto tienen valor 0, mientras que las propiedades de máximos max-width y max-height, tienen por defecto valor none.

Zonas de un elemento

Antes de continuar, es importante saber que en CSS existen ciertas palabras clave para hacer referencia a una zona u orientación concreta sobre un elemento. Son conceptos muy sencillos y prácticamente lógicos, por lo que no tendrás ningún problema en comprenderlos. Son los siguientes:

Zonas del modelo de cajas: left, right, top, bottom y center

Palabra clave Descripción
top Se refiere a la parte superior del elemento.
left Se refiere a la parte izquierda del elemento.
right Se refiere a la parte derecha del elemento.
bottom Se refiere a la parte inferior del elemento.
center En algunos casos, se refiere a la posición central entre los extremos horizontales o verticales.

Estas palabras clave las utilizaremos muy a menudo en diferentes propiedades CSS para hacer referencia a una zona particular del elemento.

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 es una situación que ocurre en estos modelos de maquetación básica, donde los márgenes de dos elementos se colapsan, ocupando el mismo tamaño una sola vez. En el ejemplo anterior, ocupa sólo esos 20px, en lugar de los 40px de la suma del margen de cada caja.

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