CSS: display

(Elivelto Ebermam)

 

A propriedade display controla como os elementos serão posicionados na tela. Existem quatro valores básicos que podem ser usados para essa propriedade: none, block, inline e inline-block. O valor none é usado para o elemento não aparecer na tela. O valor block faz com que o elemento use a linha toda da tela, mesmo que não ocupe todo o espaço, ou seja, não permite que se adicione outro elemento ao lado dele. O valor inline só ocupa o espaço referente ao seu conteúdo, permitindo que se adicione outros elementos ao seu lado. Porém ele não permite definir a largura e altura do elemento por exemplo. O valor inline-block é a combinação dos dois anteriores, ele permite que se adicione elementos ao lado e que se defina largura e altura por exemplo.

 

Características	Valores para a propriedade display
	block	inline	Inline-block
Ocupa toda a linha da tela?	sim	não	não
Permite adicionar outros elementos ao lado?	não	sim	sim
Permite definir medidas como altura e largura do elemento?	sim	não	sim

 

 

Valor block

Quando o valor do display é block, o elemento ocupará todo os espaço da linha da tela. Se você adicionar outro elemento, ele não ficará ao lado do primeiro, mas será jogado para baixo. Vamos ver um exemplo onde temos duas divs:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ9HED0E1BN3

 

A div em azul não fica ao lado da div em verde, ao invés disso, ela é jogada para baixo.

 

Valor inline

Já o valor inline permite que as divs (ou outros elementos) fiquem lado a lado. Porém, não se pode definir as dimensões delas. Assim, elas ocuparão apenas o espaço necessário para abranger o conteúdo dentro dela. Veja o que acontece quando usamos o valor inline:

 

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJ9HIN0D7I4X

 

A div azul fica ao lado da div verde, na mesma linha. Note que o tamanho da div é apenas o necessário para abranger o conteúdo dentro delas (no caso a palavra Exemplo).

 

Valor inline-block

O valor inline-block é a junção dos dois valores (inline e block). Nesse caso, pode-se adicionar elementos lado a lado e ainda definir a dimensão dos mesmos. Veja um exemplo:

Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GJU02B1EHQ8P

 

No exemplo, o tamanho das divs foi definido com 200 pixels de altura e largura. Além disso, elas aparecem lado a lado.