Comparación: margin y padding en elementos inline y de bloque

Ejemplo 11 de cajas

En los elementos de bloque (como div o p), los márgenes y rellenos afectan por igual en todas las direcciones.
En los elementos inline (como span o a), los márgenes y rellenos verticales no separan el texto superior o inferior, solo afectan lateralmente.

Ejemplo visual

Modifica margin y padding de span para ver cómo verticalmente provoca efectos extraños

Este es un inline con margin y padding grande 20 (50 demasiado) dentro de un texto.

Este es un elemento de bloque con los mismos márgenes y rellenos.