span

Es una etiqueta comodín como el div, solo que este es para texto.

Display Block

Lo que sucede con este display es que va a utilizar el 100% del espacio que tenga delante sin importar que el contenido tiene o no espacio.

Ocupa siempre el 100% del espacio del width.

A este display podemos agregarle un margin y padding en las cuatro posiciones.

Algunas etiquetas que son display block son ul, p, h1.

Display inline

Con este display el contenido ocupa el espacio en relación con su contenido, si el contenido ocupa 10px, el ancho que va a ocupar va a ser de 10px lo que permite que otras etiquetas se coloquen al lado de este.

Crece de forma lineal, según su contenido por ende no puedo dale un width ni un height.

En este no podemos utilizar el margin o padding en la parte superior e inferior, pero si en los laterales.

Algunos ejemplos son las etiquetas son el span, a, button, label.

Display inline-block

Es una función de lo mejor de block e inline, este hace que ocupe el 100% del tamaño del contenido y si hay espacio permite que otros hermanos se puedan poner al lado.

Nos permite agregar margin y padding en las 4 direcciones, además de poder utilizar el width y height.

Display list-item

Se comporta parecido al display block, son elementos de una lista de arriba a abajo como ser un li.

Código de la clase