Introducción al modelo de caja

1.1 Fundamentos del modelo de caja

El modelo de caja es la base para entender cómo los elementos se colocan e interactúan entre sí en una página web. Define la estructura y tamaño de los elementos HTML, así como cómo se rodean de rellenos, bordes y márgenes externos.

Fundamentos del modelo de caja

El modelo de caja de CSS describe la composición de los bloques de elementos HTML. Cada elemento consta de cuatro componentes principales:

• Contenido (content).
• Relleno (padding).
• Bordes (border).
• Márgenes externos (margin).

Estos componentes determinan cómo se mostrará un elemento y cómo interactuará con otros elementos en la página.

Contenido (Content)

El contenido (content) es la parte principal del elemento, que puede incluir texto, imágenes u otros elementos anidados. Las dimensiones del contenido pueden especificarse explícitamente mediante las propiedades width y height, o definirse por el contenido del elemento.

Ejemplo de uso

En este ejemplo, el contenido del elemento .content incluye el texto "Este es el contenido del elemento.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        Este es el contenido del elemento.
      </div>
    
  

1.2 Visualización del modelo de caja

Cada elemento en el modelo de caja se puede representar como un bloque rectangular que consta de las siguientes partes:

• Contenido (Content): el contenido interno del elemento, como texto o imagen
• Relleno (Padding): el espacio entre el contenido y el borde del elemento
• Borde (Border): la línea que rodea el relleno y el contenido
• Margen (Margin): el espacio entre el borde del elemento y los elementos vecinos

Visualización del modelo de caja:

    
      .element {
        width: 200px;           /* Ancho del contenido */
        padding: 10px;          /* Relleno */
        border: 2px solid red;  /* Borde */
        margin: 20px;           /* Margen */
      }
    
  

1.3 Bordes (Border)

Los bordes (border) rodean el contenido y los rellenos del elemento. Los bordes pueden tener diferentes estilos, grosor y color. Se pueden usar bordes para resaltar visualmente los elementos en la página.

Ejemplo de uso

En este ejemplo, se aplica un borde de 5 píxeles de grosor, discontinuo y de color negro al elemento .border, que rodea el contenido y los rellenos.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        Este es un elemento con borde.
      </div>