Entender y dominar el modelo de cajas de CSS es muy importante si quieres progresar en el conocimiento de este lenguaje. Pero no te asustes, es muy sencillo e intuitivo aprender sus diferentes partes.
Hace unos años, el modelo de cajas era un suplicio porque los diferentes navegadores interpretaban sus propiedades de forma diferente. Así que en unos navegadores se veía de una forma y en otros no se veía diferente.
Actualmente, ese problema ya no lo tenemos. Ahora todos los navegadores interpretan el modelo de cajas de forma muy parecida, por lo que los desarrolladores nos podemos relajar.
Tabla de contenidos
Representación del modelo de cajas
El modelo de cajas se compone de cuatro conceptos muy destacados. Son el contenido, padding, border y margin. A continuación se muestran gráficamente.

Contenido
El contenido es propiamente lo que colocamos físicamente en la pantalla, ya sea una imagen, un contendedor que tiene que tener otros elementos dentro, un texto, etc… Es importante imaginar que el contenido que sea tiene una delimitador a su alrededor, representado en la imagen de arriba con una línea de color verde.
Padding
El padding
es el espacio que separa el contenido de su propio borde o marco. Es decir, si el padding
fuera 0, el contenido delimitador del contenido y el border
sería el mismo. Es decir, las línea roja y verde de la imagen estarían unidas o solapadas.
Por lo que el padding
es el espacio interior entre su borde y el contenido como tal. Es como si pusiéramos un marco para que respire el contenido.

Border
El border
es el borde máximo teórico del contenido. Es el marco externo del contenido sin padding
.
La gracia de disponer del borde (border
) es que puedes poner bordes de todo tipo como si fueran marcos. Hay bordes de puntos, sólidos, con efectos 3D, etc. Incluso, si quieres, que no se vea (opción por defecto).
En la imagen modelo cajas CSS3, el border
tiene un tipo de borde sólido de color rojo.
Margin
El margin
es el espacio exterior entre el contendido y el resto de los elementos de la página.
Esta propiedad es muy útil para dejar espacio entre los diferentes contenidos. Si tienes un margin
de 0, los otros elementos quedarán todos solapados. Es muy útil, cuando estás maquetando, poner un borde a todo el contenido para ver gráficamente donde están situados, para después, cuando los acabas colocando todos, quitarles el borde.
Conceptos de ubicación
Hay una serie de palabras clave que hacen referencia a la parte del contenido. Son términos en inglés, pero que son conocidos por todos de una forma muy lógica.
Estos conceptos son; top, right, bottom y left. Como puedes intuir es arriba, derecha, abajo y izquierda.

Además, la palabra clave center
hace referencia al centro de los elementos y la utilizas como valor para este cometido. La altura del contenido es height
y la anchura es width
.
Cuanto tu quieres insertar dos contenidos de por ejemplo 600px uno al lado del otro y tienes un espacio de pantalla de 1200px, tú puedes pensar que te quedará perfecto. Pero no es así, porque tienes que contar con el espacio del margin, padding,
y border
que se suman al total. Es decir será los 600px + padding
+ margin
+ border
.
Si tienes un margin
de 30px y un padding
, de por ejemplo 20px, y un border
de 2px necesitarás 600 + 60 (30 de cada lado)+ 40 (20 de cada lado) + 4 (2 de cada lado) = 704 px por cada contenido. No te cabrán las dos una al lado de otra.
Por suerte dispones de unas propiedades CSS que controlar la forma en que el navegador tiene que interpretar esas medidas. Te las comento aquí, pero las veremos más detenidamente en el apartado modelo template layout module.
Es la propiedad box-sizing
, la cual tiene los valores content-box (por defecto), las propiedades se suman y border-box
, que incluyen el contenido, relleno (padding
), el borde (border
), pero no incluye el margin
.
Si te ha gustado o te ha aclarado conceptos el contenido de este articulo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta