Modelo de la caja en CSS

Hoy vamos a aprender el modelo de la caja en CSS, qué es y qué propiedades tiene y cómo podemos modificarla.

El modelo de la caja.

Todos los elementos de HTML pueden ser considerados cajas en CSS. Se le dice modelo de la caja cuando estamos hablando del diseño de la página.

El modelo de la caja engloba los márgenes, bordes, padding (relleno) y el contenido de la caja.

Lo podemos ver más claro con un ejemplo ilustrado:

Margen

Borde

Padding

Contenido

 

 

 

¿Cómo entender la ilustración de arriba?

  • Contenido: el contenido del cuadro es donde aparecen texto e imágenes.
  • Padding: es un área transparente que podemos definir alrededor del contenido.
  • Borde: es un borde que rodea el padding.
  • Margen: es un área transparente alrededor del borde.

El modelo de la caja nos da mucha flexibilidad a la hora del diseño.

Veamos un ejemplo:

Título

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

 

En el ejemplo anterior vemos una caja de color gris de fondo que contiene dos cajas más pequeñas, una de color azul claro con el ‘Título’ y otra de color rosa pálido con el texto.

Veamos como cambia con valores de márgenes, bordes y paddings.

Título

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Se ve mucho más claro.

Incluso podemos tener cajas como estas:

Título
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas “Letraset”, las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

En artículos posteriores te enseñaré a darle valores a los márgenes y a los paddings.

El modelo de la caja de CSS es muy útil a la hora de diseñar y es indispensable cuando realicemos diseños responsive.

Mientras tanto podemos seguir aprendiendo CSS ¿Cómo utilizar los colores en CSS?, Fondos en CSS, Fuentes en CSSTextos en CSS

Te ha parecido interesante? Espero tus comentarios abajo.

Deja un comentario