Modelo de caja CSS
Ya conoces bordes, padding, margin y width. Ahora ponlos en un solo mapa. El modelo de caja CSS dice que cada elemento es un conjunto de capas anidadas: contenido en el centro, luego padding, luego borde, luego margin por fuera.
Las cuatro capas
Lee la caja de dentro hacia fuera.
📊 Capas del modelo de caja
| Capa | Dónde se sitúa | Trabajo cotidiano |
|---|---|---|
| Contenido | Centro | Texto, imágenes e hijos viven aquí; width / height suelen medir esto |
| Padding | Entre contenido y borde | Colchón interior; el fondo suele rellenarlo |
| Borde (border) | Alrededor del padding | El borde dibujado de la caja |
| Margin | Fuera del borde | Hueco exterior que separa esta caja de sus vecinos |
Empieza solo con el tamaño del contenido
Un ancho sencillo sin padding ni borde mantiene la historia clara.
Solo ancho de contenido
css.box-content {
width: 200px;
background-color: #ccfbf1;
}Añade padding — el área pintada crece
El padding se sitúa dentro del borde. En el modelo por defecto content-box, el padding se añade fuera del ancho del contenido, así que la caja pintada se ensancha.
Contenido más padding
css.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* El contenido sigue midiendo 200px; el padding suma 20px por lado */Añade un borde — otro anillo
El borde envuelve el padding. Con el sizing por defecto, el grosor del borde también suma al tamaño exterior de la caja de borde.
Contenido, padding y borde
css.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}Junta las cuatro capas
El margin no pinta el fondo; solo aleja a los vecinos.
Receta completa del modelo de caja
css.card {
width: 200px; /* contenido */
padding: 16px; /* colchón interior */
border: 2px solid #134e4a; /* borde */
margin: 24px; /* hueco exterior */
background-color: #ecfdf5;
}Mismo ancho, tamaño total distinto
Dos cajas pueden compartir width: 200px y sentirse muy distintas cuando padding y borde entran en la receta.
Comparar simple vs. con padding
css.bare {
width: 200px;
background-color: #fef3c7;
}
.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* Ambas declaran width 200px; .padded ocupa más espacio horizontal */Regla por defecto para recordar
Por defecto (box-sizing: content-box), width y height describen la caja de contenido. Padding y borde suelen hacer más grande la caja visible final. Una lección posterior cubre box-sizing: border-box, que cambia esa cuenta.
Pruébalo tú
- Construye
.box-contentsolo conwidth: 200pxy un fondo. - Cópialo, añade
padding: 20pxy observa crecer el área pintada. - Añade un borde grueso y mira otra vez el tamaño total.
- Añade
margin: 24pxy confirma que los vecinos se alejan sin que el fondo rellene ese hueco. - Coloca
.barey.paddedlado a lado — mismo ancho declarado, distinta huella.
Errores comunes
- Pensar que el margin forma parte del relleno de fondo (está fuera y suele ser transparente)
- Declarar
width: 200pxy esperar que la caja de borde siga exactamente en 200px tras mucho padding (no con content-box) - Mezclar el orden de las capas (contenido → padding → borde → margin)
- Confundir outline con border (otra herramienta)
- Saltar a hábitos border-box antes de entender el modelo por defecto
Resumen
- Cada elemento tiene capas de contenido, padding, borde y margin
- El padding está dentro del borde; el margin fuera
- width/height por defecto miden la caja de contenido
- Padding y borde suelen aumentar el tamaño visible total
- El margin crea separación exterior sin pintar el relleno
box-sizing(próxima lección especializada) puede cambiar la cuenta del ancho
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior