El modelo de caja (box model)
Cómo se calcula el tamaño real de cada elemento.
Todo elemento HTML es una caja rectangular compuesta, de adentro hacia afuera, por: content (el contenido), padding (espacio interno), border (borde) y margin (espacio externo respecto a otros elementos).
Por defecto, width y height solo definen el tamaño del contenido; el padding y el borde se suman al tamaño final. Por eso es habitual usar box-sizing: border-box, que hace que width/height incluyan padding y borde, evitando cálculos sorpresa.
Entender el box model es clave para depurar por qué dos elementos no se alinean como esperas: casi siempre es un margin o padding inesperado.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Agrega padding y margin distintos a la caja y observa cómo cambia el espacio entre elementos.