El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El modelo de caja es un concepto fundamental en CSS que describe cómo se estructuran y se comportan los elementos en una página web. Cada elemento en HTML se representa como una caja rectangular, y el modelo de caja define el espacio que ocupa cada uno de estos elementos, así como sus propiedades de diseño.

Componentes del Modelo de Caja

El modelo de caja se compone de cuatro áreas principales:

Contenido (Content): El área donde se muestra el contenido del elemento, como texto o imágenes.
Relleno (Padding): El espacio entre el contenido y el borde del elemento. El relleno es transparente.
Borde (Border): El borde que rodea el relleno y el contenido. Puede tener diferentes estilos, grosores y colores.
Margen (Margin): El espacio exterior al borde. Los márgenes son transparentes y se utilizan para separar los elementos entre sí.

Visualización del Modelo de Caja

Aquí tienes una representación visual del modelo de caja:

+---------------------------+
|        Margen (Margin)    |
|  +---------------------+  |
|  |     Borde (Border)  |  |
|  |  +---------------+  |  |
|  |  | Relleno       |  |  |
|  |  | (Padding)     |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Contenido|  |  |  |
|  |  |  | (Content)|  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

Propiedades CSS del Modelo de Caja

Contenido

El contenido se define por las propiedades específicas del elemento, como width y height.

.elemento {
  width: 200px;
  height: 100px;
}

Relleno (Padding)

El relleno se puede definir para cada lado de la caja: padding-top, padding-right, padding-bottom, padding-left, o de manera abreviada con padding.

.elemento {
  padding: 10px; /* Aplica 10px de relleno a todos los lados */
  padding-top: 20px; /* Aplica 20px de relleno solo en la parte superior */
}

Borde (Border)

El borde se puede definir con las propiedades border-width, border-style, y border-color, o de manera abreviada con border.

.elemento {
  border: 2px solid black; /* Borde de 2px, sólido y negro */
}

Margen (Margin)

El margen se puede definir para cada lado de la caja: margin-top, margin-right, margin-bottom, margin-left, o de manera abreviada con margin.

.elemento {
  margin: 15px; /* Aplica 15px de margen a todos los lados */
  margin-bottom: 30px; /* Aplica 30px de margen solo en la parte inferior */
}

Ejemplo Práctico

Vamos a crear un ejemplo práctico para visualizar cómo se aplican estas propiedades.

HTML

<!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</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="caja">Contenido</div>
</body>
</html>

CSS

.caja {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid blue;
  margin: 30px;
  background-color: lightgray;
}

Explicación del Código

width: 200px; y height: 100px; definen el tamaño del contenido.
padding: 20px; añade un relleno de 20px alrededor del contenido.
border: 5px solid blue; añade un borde de 5px de grosor, sólido y azul.
margin: 30px; añade un margen de 30px alrededor de la caja.
background-color: lightgray; establece un color de fondo gris claro para la caja.

Ejercicio Práctico

Ejercicio

Crea una caja con las siguientes especificaciones:

Ancho de 300px y alto de 150px.
Relleno de 15px en todos los lados.
Borde de 3px, sólido y rojo.
Margen de 25px en todos los lados.
Color de fondo amarillo.

Solución

.caja-ejercicio {
  width: 300px;
  height: 150px;
  padding: 15px;
  border: 3px solid red;
  margin: 25px;
  background-color: yellow;
}

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio Modelo de Caja</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="caja-ejercicio">Contenido del Ejercicio</div>
</body>
</html>

Conclusión

En esta lección, hemos aprendido sobre el modelo de caja en CSS y cómo se compone de contenido, relleno, borde y margen. También hemos visto cómo aplicar estas propiedades a través de ejemplos prácticos. Comprender el modelo de caja es esencial para controlar el diseño y la disposición de los elementos en una página web. En la próxima lección, exploraremos más a fondo las propiedades de margen y relleno para dominar completamente el diseño de cajas en CSS.

Entendiendo el Modelo de Caja

Componentes del Modelo de Caja

Visualización del Modelo de Caja

Propiedades CSS del Modelo de Caja

Contenido

Relleno (Padding)

Borde (Border)

Margen (Margin)

Ejemplo Práctico

HTML

CSS

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

HTML

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo