Vamos aprender nessa aula alguns detalhes importantes sobre a propriedade display no CSS.

Ainda pensando nos elementos do HTML como caixas, podemos dizer que a propriedade “display” vai determinar como o navegador deve renderizar cada caixa no fluxo de elementos de sua página.

Ficou um pouco confuso mas vamos lá: A nossa página HTML é um conjunto de elementos colocados um após o outro quando estamos criando nosso código HTML.

E o navegador ao renderizar uma página HTML para transformar todo aquele código em uma página, vai ali percorrendo elemento por elemento. Ao percorrer, ele precisa saber como aquele elemento deve ser mostrado.

Display block x inline

Basicamente existem 2 formas de o navegador renderizar os elementos: Block e inline. Já vimos em outras oportunidades que um elemento do tipo block ao ser renderizado ocupa toda a largura de seu elemento pai.

Ao ocupar toda a largura, ele obriga que o próximo elemento depois dele seja mostrado abaixo dele, nunca ao lado.

Já elementos do tipo inline ocupam apenas o espaço necessário para mostrar seu conteúdo.

Naturalmente os elementos já possuem um valor de display no CSS, alguns são naturalmente “inline” como por exemplo o elemento span e outros são “block” como a div e o parágrafo (p).

Mas ao utilizarmos a propriedade “display” podemos alterar por exemplo um elemento que é “block” para ser agora “inline” e vice-versa.

A declaração dessa propriedade é bem simples:

Nesse exemplo acima tornamos o elemento “teste1” um elemento do tipo block e tornamos o elemento “teste2” para o tipo inline.

Display: none

Uma outra forma de utilizarmos a propriedade display é utilizando o valor “none”. Ao informar que um elemento deve ser “display: none” estamos excluindo ele da renderização.

Quando o navegador percorrer os elementos de sua página para renderizar e ele encontrar um elemento com “display: none” ele simplesmente vai ignorar a existência desse elemento, não vai mostrar ele na tela.

Essa propriedade é muito utilizada quando queremos esconder algum elemento, para ele não ser mostrado na tela aos usuários.

Vimos aqui 3 valores para a propriedade “display” mas existem vários outros valores possíveis como por exemplo “inline-block”, “flex”, etc. Aconselho você treinar bastante esses 3 valores e dominá-los para depois aprender os outros.