El Modelo de Caja en CSS

El tema de hoy es fundamental para tu aprendizaje de CSS, se trata del modelo de caja. Debo reconocer que no es uno de los temas más divertidos pero sí de los más necesarios, porque si no aprendemos ésto ahora, luego se convertirá en una cáscara de plátano para futuras ocasiones.

Empecemos, ¿qué es el modelo de caja? Pues como su nombre indica se refiere a que en CSS todos los elementos de HTML, que hemos aprendido en anteriores lecciones son tratados como «cajas».

Normalmente cuando se explica el modelo de caja se suele mostrar un esquema visual con el resultado final. Nosotros lo haremos un poco distinto, lo vamos a ir construyendo paso por paso.

Propiedad width:

Cuando aprendimos la diferencia entre los inline elements y los block elements te expliqué que los del primer tipo ocupaban sólo el tamaño de su contenido y los segundos toda la fila independientemente del contenido.

Por lo tanto, con CSS tiene sentido que podamos modificar la anchura de los elementos de tipo bloque, para que ocupen lo que nosotros deseemos. Por ejemplo:

Pero, ¿qué pasa cuando a un inline element le asignamos un width? Por ejemplo, veremos que es común asignar la anchura a una imagen. En este caso ese elemento pasará a ser de tipo bloque, pero en esta lección sólo quiero que entiendas que todo elemento tiene una anchura, la cual le podemos definir.

Propiedad padding:

Seguimos con el modelo de caja, ahora toca hablar de la propiedad padding, que nos permitirá definir un espacio vacío al rededor de un elemento. Retomando el ejemplo anterior, vamos a declarar un espacio de 15px al rededor del encabezado h1. Para ello haríamos:

Es decir, para cada lado la caja le asignamos un espacio vacío de 15px. Por supuesto, podrías elegir el valor que quieras para cada uno. Y cuando definimos la misma medida para todos los lados tan sólo es necesario escribir:

Ahora imagínate, que queremos 10px arriba, 5px a la derecha, 15px abajo y 0px a la izquierda. En este caso podríamos hacer como en el ejemplo inicial o utilizar la sintaxis de una sola fila:

Por tanto, su sintaxis funciona en sentido horario:

padding: arriba derecha abajo izquierda

Asimismo, fíjate que el cero no va acompañado de unidad de medida, eso es porque en CSS no es necesario indicar unidad de medida cuando usamos el cero. El festival no acaba aquí, si de da el caso, bastante común por cierto, de querer declarar un mismo padding para arriba y abajo y otro para los laterales, utilizamos la sintaxis:

padding: arriba&abajo izquierda&derecha

Y por si no hubiera ya suficientes combinaciones, existe una sintaxis para definir un padding superior, uno lateral común y uno inferior:

padding: arriba izquierda&derecha abajo

Por último fíjate en el esquema. La zona vacía que se corresponde al padding la he pintado del mismo verde que el width. Esto es porque como veremos el padding comparte el mismo color de fondo que el elemento en sí.

Propiedad border:

Si queremos asignar un borde a la «caja» tendremos que definir tres propiedades: el estilo, la anchura y el color:

El estilo puede tomar distintos valores que encontrarás aquí. Si lo deseas puedes declarar la propiedad border en una sola línea con la siguiente sintaxis:

Finalmente, igual que pasaba con la propiedad padding podemos definir un tipo de borde para cada lado de la caja. Lo haremos especificando el estilo, anchura y color de cada lado, por ejemplo, si queremos que el borde inferior sea de color verde, lo especificaremos del siguiente modo:

Propiedad margin:

Vamos ya a por la última propiedad: el margin. En CSS el margen se aplica fuera de la caja, es decir, al contrario de lo que pasaba con la propiedad padding, el margen no mantiene el color de fondo del elemento, sino que siempre será transparente.

Además, su sintaxis es idéntica a la del padding, pero substituyéndolo por la palabra margin. Si a nuestro ejemplo le declaramos un margen superior de 20px, escribiremos:

Para acabar con este tutorial es muy importante que aprendas a no caer en la siguiente cáscara de plátano. Los márgenes superiores e inferiores de dos elementos contiguos no se suman sino que se solapan. Es decir, si tenemos dos elementos uno encima del otro. Si al primero le asignamos un margen inferior de 10px y al elemento de abajo le asignamos un margen superior de 30px, éstos no se separarán en 40px, sino que la separación será de 30px, ya que se solaparán y prevalecerá la medida superior. En la siguiente imagen lo entenderás fácilmente:

Y de esta forma completaríamos el modelo de caja en CSS. Formado por el width, padding, border y margin de un elemento HTML. Por supuesto, cuando nos pongamos manos a la obra con el editor de código podremos ver todo esto aplicado en la práctica.

Recuerda que puedes seguir aprendiendo con los cursos de diseño y desarrollo WordPress del <a href=»https://silicodevalley.com/»>Club SiliCodeValley</a>, a partir de 29€/mes sin permanencia, con soporte a tus dudas incluido y acceso a la comunidad privada de miembros.

¡Un abrazo y seguimos!