El modelo de caja

Todo es una caja

Aquí viene uno de los conceptos más fundamentales de CSS — algo que una vez que entiendes, cambia completamente cómo piensas sobre el diseño web.

Absolutamente todos los elementos de una página web son cajas. Esa imagen, ese botón, ese párrafo, ese div invisible que ni se nota. Todo. Todos son rectángulos, y todos tienen la misma estructura interna: el modelo de caja.

Las cuatro capas de la caja

Cada elemento es como una cebolla con cuatro capas, de adentro hacia afuera:

1. Contenido — La capa más interna. Es donde vive el texto, la imagen o lo que sea que haya dentro.
2. Padding — La capa de relleno. El espacio entre el contenido y el borde.
3. Border — La capa del borde. El contorno visible (o invisible) del elemento.
4. Margin — La capa más externa. El espacio que separa este elemento de sus vecinos.

El problema del tamaño

Aquí viene el giro que confunde a muchos principiantes. Prueba este ejemplo:

¿Cuánto mide el elemento? La mayoría diría: 300px de ancho y 200px de alto. Es lo que le indicaste, ¿no?

Pero el tamaño real es 314px de ancho y 214px de alto. Sorpresa.

¿Por qué? Porque cuando asignas width y height, se lo estás dando únicamente a la capa del contenido. Las demás capas se suman por fuera:

• Ancho total: 300px (contenido) + 5px (padding izq.) + 5px (padding der.) + 2px (borde izq.) + 2px (borde der.) = 314px
• Alto total: 200px (contenido) + 5px (padding sup.) + 5px (padding inf.) + 2px (borde sup.) + 2px (borde inf.) = 214px

¿Y el margen?

El margen queda fuera de esta ecuación. No suma al tamaño del elemento — es espacio exterior. Las únicas capas que afectan al tamaño final son: contenido, padding y borde.

Tu desafío 🚀

Crea un .mi-caja con width: 300px, height: 200px, padding: 10px y border: 2px solid red. Antes de inspeccionarlo, intenta calcular cuánto medirá realmente la caja contando contenido, padding y borde.

Ahora ya sabes por qué los diseños a veces no miden lo que esperabas...