Para entender a propriedadedisplay, primeiro é preciso saber que tudo no CSS e Html são caixas.
Ao digitar uma palavra por exemplo, o entorno do que foi escrito é um retângulo. Se teclo "Z", a letra é um elemento da área em geral invisível. Portanto,display é a caixa ou área que circunda um elemento.
É possível modificar o comportamento padrão dodisplay e ter o resultado desejado, pelos valoresinline,block einline-block;

Inline

Os elementos ficam em sequência e na mesma linha, alinhados à esquerda dodisplay. Ao aplicar o estiloinline, atag comporta-se como uma palavra. Isso significa que não há possibilidade de modificar altura e largura da área. Com esse valor, o conteúdo define o tamanho da caixa.

Vantagens

• mesma linha;
• height ewidth fixos;
• alinhamento customizável;
• tag como palavra;
• tamanho com base no conteúdo;

Block

É o oposto dainline.
Por padrão o valorblock ocupa toda a linha, mesmo com outratag definida comoinline. A largura e o tamanho podem ser modificados. Quando não especificado awidth é definida pelatag parent e aheight pelo conteúdo.

Vantagens

• ocupa toda a linha;
• altura e largura configuráveis;
• width 100% datag parent (padrão);
• height 100% do conteúdo (padrão);

Inline-block

O melhor das tags anteriores.
Herda comportamento de palavra, fica ordenado na mesma linha com outros elementos e tags inclusive, a largura e tamanho são configuráveis.

Vantagens

• mesma linha;
• tag como palavra;
• altura e largura modificáveis;
• width 100% datag parent (padrão);
• height 100% do conteúdo (padrão);