Box Model: El átomo de CSS
Cada elemento en la web es una caja. Entender cómo se calculan sus dimensiones es fundamental para cualquier maquetador.
Laboratorio Interactivo: Box Model
Experimenta con las dimensiones en tiempo real. Prueba a cambiar el `padding` o el `border-width` y observa el comportamiento.
Padding
Espacio interno entre el contenido y el borde. Aumenta el tamaño total a menos que uses `box-sizing: border-box`.
Border
El límite físico de la caja. Puede tener grosor, estilo y color.
Margin
Espacio externo que separa el elemento de sus vecinos. No afecta al color de fondo del elemento.