La propiedad display sirve para indicar como se mostrarán los elementos en la pantalla. Si lo haran en formato de linea o bloque o como se comportaran los hijos de ese elemento. Puede ser como flow (Diseño de Flujo), grid (Cuadricula) o flex (Flexible). Eso lo veremos mas adelante.

Display: block

La mayoria de los elementos por defecto tienen la propiedad display: block. Es decir que se comportan como bloques. Un ejemplo de esto:

Tenemos el siguiente codigo

<p>Hola</p>
<p>Como</p>
<p>Estas</p>
<p>Rey</p>

Este código se verá asi

Porque el comportamiento por defecto del navegador es agregar cada elemento uno debajo de otro. Eso lo hace display: block.

Display: inline

Ya vimos como se comportan los elementos que se ven en bloque pero entonces ¿como se verian en fila? Hagamos la prueba con el mismo codigo html de arriba, pero asignandole la propiedad display:inline;

Ahora los elementos se encuentran todos en la misma linea. Esto ocurre cuando utilizamos la propiedad display:inline.

Display: inline-block

A veces podemos querer que un elemento se vea en linea pero mantenga su formato de bloque. Por eso se inventó el valor inline-block. Se vería algo asi

Parece no haber mucha diferencia pero atento a esto: se le agrega un padding a las palabras. Esto es porque su comportamiento de bloque también tenia ese padding, como vemos en el ejemplo de display:block

ATENTI

Este comportamiento se puede lograr con display:flex

Existen mas de 30 valores disponibles para display, sin embargo estos tres junto con flex y grid son los mas utilizados.