Neste tutorial você vai aprender as principais diferenças entre as 3 propriedades do CSS que são: Display: blockDisplay: inline e Display:inline-block. Após a leitura desse guia, você não terá mais duvidas na hora de montar seu layout.

A propriedade do CSS, display, serve para você definir como um elemento html deve ser renderizado. Apesar de ser uma propriedade muito antiga, muitos desenvolvedores ainda tem duvidas de onde e qual das 3 propriedades usar, já que ela pode ser usada de várias maneiras e dependendo do navegador o resultado é diferente. Então vamos ver agora as principais diferenças entre as três.

Display:inline

A propriedade Display:inline faz com que um elemento html fique um ao lado do outro, quase que como um float, mas sem a possibilidade de editar sua altura e largura. Outra característica do display:inline é que por padrão ele deixa espaço entre um elemento e outro. Vejamos um exemplo do display:inline.

Agora o css básico para dar a formatação

display inline
Como podemos observar, o display:inline deixou os elementos um ao lado do outro, mas sem a possibilidade de modificar sua altura e largura. Outra coisa a ser analisada é o espaço que ficou entre os elementos.

Display:block

No caso da Dsiplay:block, o comportamento é o contrário da display:inline. Uma vez setada, esta propriedade impede que outro elemento fique ao seu lado, a não ser que acrescente um float. Vejamos agora o display:block funcionando.

Agora o CSS.

E o resultado é esse.
display block
Perceba que a única diferença entre os códigos do primeiro exemplo para esse, foi a troca do display:inline pelo display:block. Foram criados 3 blocos onde se pode setar altura e largura. Caso queira colocar um ao lado do outro, pode se usar a propriedade float.

Uma curiosidade do display:block é que por padrão essa propriedade já vem setado nos navegadores. Se você modificar nosso exemplo acima e remove-la, não fará diferença nenhuma. Faça o teste e veja que nada mudará.

Display: inline-block

Que tal unirmos as qualidades do display: inline e do display: block transformando em uma só propriedade? É isso que faremos e iremos aprender a trabalhar com o Display:inline:block.

Benefícios

Como dito acima, o display: inline-block herda as características das duas anteriores e com isso fica fácil posicionar nossas divs, já que temos o fator inline e block em uma só propriedade. Usando o mesmo código dos exemplos anteriores, irei movimentar da esquerda para direita os elementos.

No html, apenas adicionei uma classe na ul.

No CSS coloquei um text-align:right e setei a li em 100px.

E o resultado é esse.
display inline-block

Com o uso da propriedade inline-block, conseguimos movimentar nossos 3 elementos como se fosse um texto, pois herdou isso do display:inilne. E também conseguimos colocar uma largura, já que herdou essa característica do display:block.

Apesar da facilidade do uso dessas 3 propriedades, não podemos negar que com o flexbox podemos fazer isso de forma mais fácil e prática. Se você ainda não sabe o que é flexbox, recomendo pesquisar.

Publicitário por formação e curioso nas áreas de designer gráfico e programação. Atualmente estudo marketing digital, PHP e JavaScript.