Sobre a propriedade display

Para entender a propriedade display, 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 do display e ter o resultado desejado, pelos valores inline, block e inline-block;

Inline

Os elementos ficam em sequência e na mesma linha, alinhados à esquerda do display. Ao aplicar o estilo inline, a tag 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 e width fixos;
• alinhamento customizável;
• tag como palavra;
• tamanho com base no conteúdo;

Block

É o oposto da inline.
Por padrão o valor block ocupa toda a linha, mesmo com outra tag definida como inline. A largura e o tamanho podem ser modificados. Quando não especificado a width é definida pela tag parent e a height pelo conteúdo.

Vantagens

• ocupa toda a linha;
• altura e largura configuráveis;
• width 100% da tag 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% da tag parent (padrão);
• height 100% do conteúdo (padrão);