Elementos <span> y márgenes superiores

Cualquiera que haya probado un poco de CSS se ha dado cuenta que las propiedades margin-top y margin-bottom no surten efectos sobre elementos del tipo span.

¿Por qué los elementos span no admiten el margin-top?

La razón es porque los tags span son elementos inline lo que significa que por defecto ocupan solo el espacio necesario para mostar los contenidos y la caja que lo contiene no sea un bloque sino como una línea.

¿Cómo solucionar que los tags span admitan márgenes superiores e inferiores?

La forma más sencilla es utilizar la misma propiedad CSS que lo impide: display, y modificarla para que sea del tipo inline-block, lo que significa que se van a crear elementos cuyos espacios o cajas:

(…) son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en línea.

En el siguiente enlaces podemos ver todas las propiedades que admite el atributo display en CSS.