Skip to content
Logo de la documentación HoneyCode

5. Cajas y Modelo de Caja (Box Model)

El Box Model (Modelo de Caja) es uno de los conceptos más fundamentales de CSS. Entenderlo es esencial para controlar el diseño y espaciado de los elementos.

📦 ¿Qué es el Box Model?

Section titled “📦 ¿Qué es el Box Model?”

El Box Model define cómo se calculan las dimensiones de un elemento. Cada caja tiene 4 áreas concéntricas:

┌─────────────────────────────────────┐
│          MARGIN (exterior)          │  ← Espacio fuera del elemento
│  ┌───────────────────────────────┐  │
│  │      BORDER (borde)           │  │  ← Línea del borde
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING (relleno)     │  │  │  ← Espacio interno
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │    CONTENT        │  │  │  │  ← Contenido (texto, imágenes)
│  │  │  │   (width/height)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

  1. Content (Contenido) Centro

    • El área donde aparece el contenido (texto, imágenes)
    • Controlado por width y height

  2. Padding (Relleno) Interno

    • Espacio transparente entre el contenido y el borde
    • Aumenta el tamaño visual del elemento
    • Hereda el color de fondo del elemento

  3. Border (Borde) Línea

    • Línea que rodea el padding y el contenido
    • Puede tener color, estilo y grosor
    • Aumenta el tamaño total del elemento

  4. Margin (Margen) Externo

    • Espacio transparente fuera del borde
    • Separa el elemento de otros elementos
    • No tiene color de fondo (siempre transparente)

📐 Propiedades de dimensión

Section titled “📐 Propiedades de dimensión”

width y height - Ancho y alto

Section titled “width y height - Ancho y alto”

Definen las dimensiones del área de contenido.

/* Valores de width y height */
.elemento {
  width: 300px;        /* Ancho fijo */
  height: 200px;       /* Alto fijo */


  width: 50%;          /* Porcentaje del padre */
  height: 100vh;       /* Porcentaje del viewport */


  width: auto;         /* Automático (default) */
  height: auto;        /* Automático (default) */
}
/* Píxeles - Tamaño fijo */
.caja-fija {
  width: 400px;
  height: 300px;
}


/* Porcentaje - Relativo al padre */
.caja-fluida {
  width: 80%;
  height: 50%;
}


/* Viewport - Relativo a la ventana */
.caja-pantalla {
  width: 100vw;   /* 100% del ancho de la ventana */
  height: 100vh;  /* 100% del alto de la ventana */
}


/* Auto - Ajusta al contenido */
.caja-auto {
  width: auto;    /* Se ajusta al contenido o al padre */
  height: auto;   /* Se ajusta al contenido */
}

max-width, min-width, max-height, min-height

Section titled “max-width, min-width, max-height, min-height”

Establecen límites para las dimensiones.

/* Límites de ancho */
.elemento {
  min-width: 200px;    /* Ancho mínimo */
  max-width: 800px;    /* Ancho máximo */


  min-height: 100px;   /* Alto mínimo */
  max-height: 500px;   /* Alto máximo */
}
/* Contenedor responsivo con límite */
.contenedor {
  width: 100%;
  max-width: 1200px;  /* No más ancho que 1200px */
  margin: 0 auto;
  padding: 0 20px;
}


/* Imagen que no excede su tamaño */
img {
  max-width: 100%;  /* No más ancha que su contenedor */
  height: auto;
}


/* Texto con ancho máximo para legibilidad */
.articulo {
  max-width: 65ch;  /* Máximo 65 caracteres */
  margin: 0 auto;
}

🎨 Padding (Relleno interno)

Section titled “🎨 Padding (Relleno interno)”

El padding es el espacio entre el contenido y el borde. Aumenta el área visible del elemento.

Sintaxis de padding

Section titled “Sintaxis de padding”
/* Padding individual */
.elemento {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}


/* Padding abreviado (shorthand) */
.elemento {
  padding: 10px 20px 10px 20px;  /* top right bottom left (sentido horario) */
  padding: 10px 20px;             /* vertical horizontal */
  padding: 10px;                  /* todos los lados iguales */
}
/* 1 valor: Todos los lados */
.padding-1 {
  padding: 20px;
  /* top: 20px, right: 20px, bottom: 20px, left: 20px */
}


/* 2 valores: Vertical | Horizontal */
.padding-2 {
  padding: 10px 20px;
  /* top: 10px, right: 20px, bottom: 10px, left: 20px */
}


/* 3 valores: Top | Horizontal | Bottom */
.padding-3 {
  padding: 10px 20px 30px;
  /* top: 10px, right: 20px, bottom: 30px, left: 20px */
}


/* 4 valores: Top | Right | Bottom | Left (sentido horario ⏰) */
.padding-4 {
  padding: 10px 20px 30px 40px;
  /* top: 10px, right: 20px, bottom: 30px, left: 40px */
}

Características del padding

Section titled “Características del padding”
/* El padding hereda el color de fondo */
.caja {
  background-color: #3498db;
  padding: 30px;
  color: white;
}
/* El área de padding también será azul */


/* Con imagen de fondo */
.caja-imagen {
  background-image: url('patron.png');
  padding: 40px;
}
/* La imagen se extiende al área de padding */

🔲 Border (Borde)

Section titled “🔲 Border (Borde)”

El border es una línea que rodea el padding y el contenido.

Propiedades de border

Section titled “Propiedades de border”
/* Propiedades individuales */
.elemento {
  border-width: 2px;           /* Grosor */
  border-style: solid;         /* Estilo */
  border-color: #3498db;       /* Color */
}


/* Shorthand (forma corta) */
.elemento {
  border: 2px solid #3498db;
  /* grosor estilo color */
}
/* Estilos de borde */
.solido    { border: 3px solid black; }      /* ──── Línea sólida */
.punteado  { border: 3px dotted black; }     /* ···· Puntos */
.discontinuo { border: 3px dashed black; }   /* ---- Guiones */
.doble     { border: 3px double black; }     /* ════ Línea doble */
.ranura    { border: 3px groove black; }     /* Efecto 3D ranura */
.cresta    { border: 3px ridge black; }      /* Efecto 3D cresta */
.insertado { border: 3px inset black; }      /* Efecto 3D insertado */
.resaltado { border: 3px outset black; }     /* Efecto 3D resaltado */
.ninguno   { border: none; }                 /* Sin borde */
.oculto    { border: hidden; }               /* Oculto (para tablas) */

Border con imágenes

Section titled “Border con imágenes”
/* border-image (avanzado) */
.borde-imagen {
  border: 10px solid transparent;
  border-image: url('borde-decorativo.png') 30 round;
}


/* Degradado como borde */
.borde-degradado {
  border: 4px solid;
  border-image: linear-gradient(45deg, #3498db, #2ecc71) 1;
}

📏 Margin (Margen externo)

Section titled “📏 Margin (Margen externo)”

El margin es el espacio transparente fuera del borde. Separa el elemento de otros elementos.

Sintaxis de margin

Section titled “Sintaxis de margin”
/* Margin individual */
.elemento {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}


/* Margin abreviado (shorthand) */
.elemento {
  margin: 10px 20px 10px 20px;  /* top right bottom left */
  margin: 10px 20px;             /* vertical horizontal */
  margin: 10px;                  /* todos los lados */
}
/* Centrar horizontalmente con margin auto */
.contenedor-centrado {
  width: 800px;
  margin: 0 auto;  /* top/bottom: 0, left/right: auto */
}


/* Centrar con max-width */
.contenedor-responsive {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}


/* ❌ No funciona para centrar verticalmente */
.no-funciona {
  height: 200px;
  margin: auto 0;  /* No centra verticalmente */
}

Diferencias entre padding y margin

Section titled “Diferencias entre padding y margin”
CaracterísticaPadding 🎨Margin 📏
UbicaciónDentro del bordeFuera del borde
Color de fondoHereda el fondo del elementoSiempre transparente
Valores negativos❌ No permitidos✅ Permitidos
Click area✅ Parte del elemento clickeable❌ No es clickeable
Colapso❌ No colapsa✅ Márgenes verticales colapsan
Uso comúnEspacio internoSeparación entre elementos

⚙️ Box-sizing: content-box vs border-box

Section titled “⚙️ Box-sizing: content-box vs border-box”

La propiedad box-sizing cambia cómo se calculan las dimensiones de un elemento.

content-box (default)

Section titled “content-box (default)”
/* content-box: width/height solo afectan al contenido */
.content-box {
  box-sizing: content-box;  /* Default */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}


/* Tamaño total:
   200px (width) + 40px (padding) + 10px (border) = 250px
*/

border-box ⭐ (recomendado)

Section titled “border-box ⭐ (recomendado)”
/* border-box: width/height incluyen padding y border */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}


/* Tamaño total: 200px
   El contenido se ajusta: 200px - 40px (padding) - 10px (border) = 150px
*/
/* CONTENT-BOX (default) */
.caja-content {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  background: #ecf0f1;
}
/*
┌─────────────────────────────────┐
│ Border: 5px                     │ ← +5px cada lado
│ ┌───────────────────────────┐   │
│ │ Padding: 20px             │   │ ← +20px cada lado
│ │ ┌─────────────────────┐   │   │
│ │ │ Content: 200px      │   │   │ ← Width definido
│ │ └─────────────────────┘   │   │
│ └───────────────────────────┘   │
└─────────────────────────────────┘
Tamaño total: 250px
*/


/* BORDER-BOX (recomendado) */
.caja-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  background: #ecf0f1;
}
/*
┌─────────────────────────────────┐
│ Border: 5px                     │ ← Incluido en 200px
│ ┌───────────────────────────┐   │
│ │ Padding: 20px             │   │ ← Incluido en 200px
│ │ ┌─────────────────────┐   │   │
│ │ │ Content: 150px      │   │   │ ← Ajustado automáticamente
│ │ └─────────────────────┘   │   │
│ └───────────────────────────┘   │
└─────────────────────────────────┘
Tamaño total: 200px (como definiste)
*/

🔍 Visualización con DevTools

Section titled “🔍 Visualización con DevTools”

Las herramientas de desarrollador del navegador son esenciales para entender y depurar el Box Model.

  1. Abrir DevTools F12

    • Chrome/Edge: F12 o Ctrl+Shift+I (Cmd+Option+I en Mac)
    • Firefox: F12 o Ctrl+Shift+I (Cmd+Option+I en Mac)
    • Safari: Cmd+Option+I (habilitar menú Desarrollo primero)

  2. Seleccionar elemento

    • Clic en el icono de selector (🔍)
    • Hover sobre el elemento en la página
    • O clic derecho → “Inspeccionar elemento”

  3. Ver el Box Model

    • Panel “Computed” o “Calculado”
    • Diagrama visual del Box Model
    • Valores exactos de cada área

  4. Editar en vivo

    • Clic en cualquier valor para editarlo
    • Ver cambios en tiempo real
    • Experimentar sin modificar el código

Interpretando el diagrama del Box Model

Section titled “Interpretando el diagrama del Box Model”
Diagrama en DevTools:


        ┌─────────────────────────┐
        │    margin: 20          │  ← Margen (naranja)
        │  ┌───────────────────┐  │
        │  │  border: 5        │  │  ← Borde (amarillo/dorado)
        │  │ ┌───────────────┐ │  │
        │  │ │ padding: 10   │ │  │  ← Padding (verde)
        │  │ │ ┌───────────┐ │ │  │
        │  │ │ │  300×200  │ │ │  │  ← Contenido (azul)
        │  │ │ └───────────┘ │ │  │
        │  │ └───────────────┘ │  │
        │  └───────────────────┘  │
        └─────────────────────────┘
🔵 AZUL - Content (Contenido)
   - Área del contenido
   - Definida por width y height


🟢 VERDE - Padding (Relleno)
   - Espacio interno
   - Entre contenido y borde


🟡 AMARILLO - Border (Borde)
   - Línea del borde
   - Grosor definido por border-width


🟠 NARANJA - Margin (Margen)
   - Espacio externo
   - Separación con otros elementos

Atajos útiles en DevTools

Section titled “Atajos útiles en DevTools”
⬆️ ⬇️ - Incrementar/decrementar valor en 1
Shift + ⬆️⬇️ - Incrementar/decrementar en 10
Alt + ⬆️⬇️ - Incrementar/decrementar en 0.1
Ctrl + Click - Editar múltiples valores
Esc - Cerrar panel

🎓 Resumen

Section titled “🎓 Resumen”
🐝