Modelo de caja en CSS

por

En este artículo vamos a explicar qué es y cómo funciona el modelo de caja en CSS, un concepto fundamental para posicionar elementos con CSS. Cuando se empieza a aprender CSS, uno de los conceptos más importantes que se deben comprender es el modelo de caja. El modelo de caja en CSS describe cómo se representan visualmente los elementos HTML en una página web, incluyendo su tamaño, relleno, borde y margen.

Tambien recomiendo la lectura del artículo Propiedad box-sizing de CSS donde explico las diferentes formas de calcular el tamaño de estas cajas en CSS. Pero ahora vamos a centrarnos en explicar el concepto de modelo de caja en CSS con un ejemplo práctico.

¿Qué es el modelo de caja?

Al añadir elementos HTML a una página web, estos siempre se colocan como si fueran cajas rectangulares (aunque sea un icono redondo) encajándolas unas con otras. Estas cajas en CSS tienen varias capas:

  • Contenido: Es el área dentro de la caja que contiene el texto, las imágenes u otros elementos HTML.
  • Relleno: Es el espacio entre el contenido y el borde de la caja. Proporciona un espacio adicional alrededor del contenido.
  • Borde: Es una línea (visible o invisible) que rodea el contenido y el relleno de la caja. Define los límites visuales del elemento.
  • Margen: Es el espacio entre el borde de la caja y otros elementos en la página. Controla el espacio entre cajas adyacentes.

Visualmente podemos representar el modelo de caja en CSS como en la siguiente imagen:

Modelo de caja en CSS

Existen elementos HTML que tienen algunas de estas capas con valores por defecto o predefinidos como los títulos <h1, h2, h3, etc>, las listas <ul, lo, li, etc>, los párrafos <p>, e incluso con valores diferentes según el navegador (Chrome, Firefox, Edge, etc).

Este es el motivo por el que muchas hojas de estilos CSS empiezan con un «reset» de todos estos elementos estableciendo sus rellenos, márgenes y bordes a 0. Ahora veamos el modelo de caja con CSS mediante un ejemplo práctico.

Ejemplo práctico

Como hemos visto, en el modelo de caja con CSS podemos definir de forma separada los márgenes, bordes y relleno de un contenido. Este contenido es el elemento principal de la caja y puede ser texto, una imagen, video, etc. Además en CSS podemos definir un mismo tamaño para los 4 lados o definir un tamaño específico para cada uno de los lados en cada capa. Veamos un ejemplo con una web y un simple cuadro de texto dentro. Este es el código HTML y CSS básico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modelo de Caja en CSS</title>
  <style>
    .container {
      width: 40%;
      padding: 0;
      border: 2px solid black;
      margin: auto;      
    }
    .caja {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid black;
      margin: 30px;
      background-color:gold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="caja">Este es un cuadro de ejemplo.</div>
  </div>
</body>
</html>

Al abrir la web en un navegador veremos una página HTML parecida a esta imagen:

Ejemplo de modelo de caja en CSS

Primero hemos creado un contenedor vacío, sin relleno, con borde negro y márgenes automáticos para centrarlo en la página y tomarlo como referencia. Dentro de este contenedor vacío hemos añadido nuestro modelo de caja CSS con contenido y poder ver las distintas capas y cómo se ajustan al contenedor «externo» de referencia con los siguientes valores:

  • width: Establece el ancho de la caja en 200px.
  • height: Establece la altura de la caja en 100px.
  • padding: Agrega un relleno de 20px dentro de la caja.
  • border: Agrega un borde sólido negro de 2px alrededor de la caja.
  • margin: Agrega un margen de 30px alrededor de la caja.
  • background-color: Añade un color dorado a nuestro modelo de caja

El modelo de caja en CSS es fundamental para comprender cómo se dimensionan y representan visualmente los elementos HTML en una página web. A medida que te familiarices con este concepto y experimentes con diferentes estilos CSS, podrás crear diseños web novedosos y bien estructurados con mayor soltura.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario