Duvida no Conceito inline e Block

Olá, Jullyan.

Tudo bem?

O display: block; faz com que uma tag ocupa a largura inteira da página, ou seja, mesmo que o item não ocupa a largura total da página, ele bloqueia e não deixa nada ao lado, ele bloqueia o conteúdo daquela linha. Todos os itens da lista têm o comportamento block. Já uma imagem não bloqueia o conteúdo, ela deixa que existam outros na lateral, e esse tipo de comportamento é chamado de display: inline;

A diferença entre eles é que mesmo que diminua o tamanho, diminua a largura de um elemento display: block;, ele vai sempre ocupar aquela linha, mesmo preenchendo só metade e o resto invisível.

Um elemento display: inline; não me deixa alterar, por exemplo, o espaçamento externo e interno dele, porém deixa colocar algo ao lado na lateral. O display: inline-block; é a junção dos dois.

Quando o elemento possui as duas condições. Ele é inline e block ao mesmo tempo. Ou seja, ele bloqueia uma largura, mas essa largura é fixa. Sou eu que dou o tamanho. E ele me deixa também mexer na largura e nos espaçamentos interno e externo e deixa colocar algo do lado na lateral.

Espero ter ajudado.

Qualquer dúvida manda aqui :)