Básico⏱ 30 min
🎨
CSS · Capítulo 5
Box Model
Entiende el modelo de caja CSS: margin, padding, border, width, height y box-sizing.
📖
Teoría
El Box Model (modelo de caja) es el concepto más importante en CSS layout. Todo elemento HTML es una caja rectangular con cuatro capas:
1. Content → El contenido real (texto, imagen)
2. Padding → Espacio interno entre el contenido y el borde
3. Border → El borde de la caja
4. Margin → Espacio externo entre esta caja y otras
El tamaño total por defecto = width + padding + border (¡margin no se incluye!).
css
/* Las 4 capas del Box Model */
.caja {
/* Contenido */
width: 300px;
height: 150px;
/* Padding (espacio interno) */
padding: 20px; /* todos los lados */
padding: 10px 20px; /* vertical horizontal */
padding-top: 10px; /* solo arriba */
/* Border */
border: 2px solid #4F8EF7;
border-radius: 8px; /* esquinas redondeadas */
/* Margin (espacio externo) */
margin: 0 auto; /* centrar horizontalmente */
margin-bottom: 1rem;
}
/* box-sizing: border-box (SIEMPRE úsalo) */
* {
box-sizing: border-box;
/* Ahora width incluye padding y border */
}⚠️box-sizing: border-box
Por defecto, CSS usa
content-box: el width solo es el contenido, y el padding/border se suma. Con border-box, el width incluye todo. Siempre agrega * { box-sizing: border-box; } al inicio de tu CSS para evitar sorpresas matemáticas.⚡
Ejercicio práctico
🎯 Tu misión
Experimenta con el Box Model creando tarjetas de perfil. Cada tarjeta debe tener: padding interno generoso, borde visible, margin entre tarjetas, y un ancho fijo. Usa box-sizing: border-box.
Vista previa