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.
Nota: Por lo tanto es muy útil establecer la propiedad box-sizing en border-box antes de empezar a maquetar tu sitio web, ya que facilita el calculo de tamaños.
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