La property display determina cómo va a ser mostrado un elemento HTML.
Todos los elementos tienen un valor de display por defecto. En la mayoría de los casos el valor de display es block o inline.
Un elemento block siempre empieza en una nueva línea y ocupa todo el ancho disponible de su elemento padre.
Algunos elementos de tipo bloque son: div, h1-h6, p, form, header, footer, section
Si el elemento padre ocupa mitad del ancho del body, entonces sus hijos block no podrán ocupar más que ese espacio.
Este elemento tiene width: 50%;
Un elemento inline no empieza en una nueva línea y solo ocupa el ancho que necesita.
Algunos elementos de tipo inline son: span, a, img
Un elemento inline-block es similar a un inline con la diferencia que se puede establecer su width y height.
Son muy útiles para definir columnas de un ancho fijo o grillas.
Comunmente usada con JavaScript para hacer toggle (ocultar/mostrar) de elementos sin tener que eliminar y recrearlos (costoso para el DOM).
También es común combinarlo con el estado :hover de un elemento padre.