Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
Todo elemento HTML es una caja rectangular formada por contenido, padding, border y margin. Entender este modelo es la base de todo el diseño en CSS.
Explicación
Todo elemento está formado por cuatro capas, de adentro hacia afuera:
contentEl contenido real del elemento: texto, imágenes u otros elementos.
paddingEspacio interno entre el contenido y el borde de la caja.
borderEl borde visible que rodea el padding y el contenido.
marginEspacio externo entre la caja y los elementos vecinos; es transparente y nunca tiene fondo.
Reto rápido
Duplica el div y dale a la copia un margin y un padding distintos para comparar el efecto.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Activa las DevTools del navegador (F12) y selecciona cualquier elemento: la pestaña "Computed" te muestra el modelo de caja exacto con sus 4 capas.
Dato extra
El modelo de caja explica por qué agregar padding o border puede hacer que un elemento se vea más grande de lo esperado — lo resolverás con box-sizing más adelante.
Error común
Confundir padding (espacio interno, con fondo) y margin (espacio externo, transparente): usar uno donde correspondía el otro es de los errores más comunes en CSS.
Siguiente paso
Ya entiendes las 4 capas de la caja. Profundicemos en cómo controlar padding y margin con precisión.
Ir a la siguiente lección