Display

A propriedade display indica se e como um elemento é exibido, e a propriedade visibility indica se um elemento deve ser exibido ou oculto da página.

Para 'esconder' um elemento na página, podemos seguir duas formas: indicando o valor 'none' para a propriedade 'display', ou indicando o valor 'hidden' para a propriedade 'visibility'. Porém, estas duas formas adquirem resultados diferentes. Como?

Usando a propriedade 'visibility' como indicamos acima, o elemento não será mostrado, porém terá seu espaço marcado na página, como se fosse realmente mostrado. Ou seja, neste caso o elemento não aparece mas afeta o layout, a aparência, da página.

Se usarmos a propriedade 'display' da forma acima, é como se o elemento simplesmente não existisse, nem sequer ocupa espaço na página.

Veja os exemplos abaixo:

Elementos 'bloco' e 'em linha'

Um elemento do tipo bloco preenche toda a largura disponível para ele e ainda tem uma quebra de linha tanto antes como depois dele. Alguns exemplos são:

• <h1>
• <p>
• <div>

Já um elemento do tipo em linha ocupa apenas a largura necessária para ele, e não tem nenhuma quebra de linha automaticamente ligada a si. Alguns exemplos são:

• <span>
• <a>

Porém, algumas vezes você talvez precise transformar um elemento de 'bloco' para 'em linha' e vice versa. Como fazer isso? É simples. Veja um exemplo:


No caso acima, os itens da lista aparecem com elementos 'em linha'.

Outro exemplo:


Neste caso os elementos 'span' passam a se comportar como se fossem elementos do tipo 'bloco'.

Porém um lembrete. Alterar como um elemento aparece na página usando a característica 'display' não muda o tipo do elemento. Apenas altera aquela aparência específica em cada caso.