El modelo de cajas es un concepto muy importante en el lenguaje CSS y en el diseño web. En esencia, todos los elementos HTML tienen una «caja» que los envuelve. Gracias al modelo de cajas se define la posición y las características dimensionales de los elementos en un documento HTML.
Las cajas de los elementos HTML son creadas de forma automática por los navegadores web. Esto significa que por cada elemento de un documento se crea una nueva caja rectangular que encierra su contenido.
Alrededor del contenido puede definirse un espacio de relleno, que puede ser variable en cada uno de los cuatro lados del contenido. A continuación se puede definir los bordes, con grosor, color y estilo variable. A partir del borde hacia fuera se definen los cuatro márgenes exteriores.
Por defecto, las cajas de los elementos no son visibles: no tienen color, ni borde ni márgenes. Mediante las propiedades padding, border y margin es posible modificar el relleno, los bordes y los márgenes, respectivamente.
En la siguiente tabla se describen los componentes que forman el modelo de cajas, partiendo desde dentro hacia fuera:
| Nombre | Propiedad | Descripción |
|---|---|---|
| Contenido | Elemento HTML | Contenido insertado por el elemento HTML. |
| Relleno | padding | Espacio de relleno entre el contenido y el borde. |
| Borde | border | Borde que delimita el final del relleno. |
| Margen | margin | Margen exterior, más allá del borde. |
Cuando se cambia el color de fondo de un elemento HTML, se modificará el color de fondo del contenido y del relleno, pero el margen seguirá transparente. Por su parte, el borde tiene su propio parámetro para definir el color.
Anchura y altura de una caja
El navegador web calcula de forma automática el ancho y alto de los elementos HTML teniendo en cuenta su contenido. Además, si se trata de elementos de bloque, estos ocuparán el ancho completo hasta alcanzar los límites (a izquierda y derecha) del elemento contenedor superior (padre).
De hecho, se puede cambiar el tipo de elemento (de bloque o de línea) con la propiedad display. En este caso, los valores que nos interesa pueden ser block para que el elemento sea de bloque e inline para que sea de línea.
El tamaño de las cajas se puede modificar especificando los valores de anchura y altura. Esto se consigue con dos propiedades CSS: width y height, para el ancho y alto respectivamente. Si no se indican, el valor por defecto de estas dos propiedades será auto (automático).
| Propiedad | Descripción |
|---|---|
width | Define el ancho de un elemento. |
height | Define el alto de un elemento. |
El ancho y alto se aplican sobre el contenido del elemento. Por tanto, las medidas totales de la caja se calculan con las propiedades siguientes:
| Ancho total | Alto total |
|---|---|
width | height |
padding-left | padding-top |
padding-right | padding-bottom |
border-left | border-top |
border-right | border-bottom |
margin-left | margin-top |
margin-right | margin-bottom |
La suma de los valores de cada una de las dos columnas da como resultado las dimensiones reales de la caja. Esto no significa que un diseñador web se dedique a realizar este tipo de operaciones, ya que en general se permite que el contenido fluya de forma normal, con medidas automáticas.
Con la propiedad box-sizing se puede cambiar el comportamiento de width y height. Usando el valor border-box, las dimensiones indicadas se aplican teniendo en cuenta el tamaño del relleno y de los bordes.
Mínimos y máximos
Hay que tener cuidado de no especificar un tamaño de caja más pequeño que el contenido. Si esto sucede, el contenido quedará parcialmente fuera de la caja. Para evitar que el contenido sobresalga se puede establecer un valor mínimo y un valor máximo, tanto de la anchura como de la altura.
Esto se consigue mediante las propiedades CSS max-width, min-width, max-height y min-height, que se describen de forma más detallada en el artículo sobre las dimensiones de los elementos HTML.
Desbordamiento de contenido
Hay ocasiones en las que es inevitable que el contenido se desborde, por lo que no queda más remedio que encontrar otra solución. Con la propiedad CSS overflow se modifica el desbordamiento del contenido.
Existen otras propiedades específicas para modificar el desbordamiento únicamente en un eje (horizontal o vertical). Estas propiedades son overflow-x (horizontal) y overflow-y (vertical). Con la propiedad CSS overflow-wrap también es posible romper palabras si desbordan fuera de la caja.
Las zonas de un elemento
Antes de terminar es oportuno hacer mención de las zonas que rodean un elemento HTML. Conocer sus palabras clave será de gran ayuda en el aprendizaje de CSS. Se trata de conceptos sencillos pero no menos importantes.
La parte superior de un elemento es conocida con la palabra top, la parte inferior es bottom, la parte izquierda es left y la parte derecha es right. Lógicamente, son los nombres de las cuatro zonas en inglés. Estas cuatro palabras clave se utilizan en muchas propiedades CSS.
