Apuntes Clase

Curso 2024-25 - IES El Rincón

Proyecto mantenido por ichigar

Modelo de cajas en css

El modelo de cajas en CSS (CSS Box Model) es el concepto fundamental que describe cómo los elementos HTML se representan y estructuran en la página web. Cada elemento se trata como una caja rectangular compuesta por las siguientes capas, desde fuera hacia dentro:

1. Content (Contenido)

2. Padding (Relleno)

3. Border (Borde)

4. Margin (Margen)

Relación entre estas capas:

Diagrama de la caja

Tipos de modelos de cajas

Hay dos modelos principales:

  1. content-box (Por defecto)
    • El width y height solo incluyen el contenido. El padding y el borde se añaden fuera del tamaño especificado.
    • Ejemplo: 
      width: 100px; /* Solo mide el contenido */
padding: 10px;
border: 5px solid black;
/* Tamaño total: 100px (contenido) + 10px * 2 (padding) + 5px * 2 (borde) = 130px */
  2. border-box
    • El width y height incluyen el contenido, el padding y el borde.
    • Ejemplo: 
      box-sizing: border-box; /* Incluye todo dentro del tamaño especificado */
width: 100px; /* El tamaño total será de 100px, distribuyendo espacio entre contenido, padding y borde */

El margen siempre se encuentra fuera de la caja y no forma parte de las dimensiones calculadas del elemento (ni en content-box ni en border-box).

Ejemplo

Aquí tienes un ejemplo práctico para entender cómo funciona el modelo de cajas en CSS con content-box (por defecto) y border-box.

Código HTML y CSS:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modelo de cajas</title>
  <style>
    /* Ejemplo con content-box (por defecto) */
    .content-box {
      width: 400px;
      height: 200px;
      padding: 20px;
      border: 10px solid blue;
      margin: 15px;
      box-sizing: content-box; /* No es necesario especificarlo porque es el valor predeterminado */
      background-color: lightgray;
    }

    /* Ejemplo con border-box */
    .border-box {
      width: 400px;
      height: 200px;
      padding: 20px;
      border: 10px solid green;
      margin: 15px;
      box-sizing: border-box; /* Incluye padding y border en el tamaño total */
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <h1>Ejemplo del modelo de cajas</h1>
  <div class="content-box">Caja con <strong>content-box</strong></div>
  <div class="border-box">Caja con <strong>border-box</strong></div>
</body>
</html>

Explicación:

1. Primera caja (content-box)

Tamaño total de la caja:

2. Segunda caja (border-box)

Tamaño del contenido real:

Visualización:

Cuando abres el código en un navegador, notarás que:

  1. La caja con content-box es más grande porque el padding y el borde se agregan al tamaño total.
  2. La caja con border-box respeta el tamaño total especificado, ajustando el espacio interno.