Propriedade Display

Conceito de display

A propriedade display é uma das mais importantes do CSS para controlarmos o nosso layout, ela especifica se ou como o elemento vai ser exibido, cada elemento HTML que temos dentro do nosso código já tem um valor de exibição padrão, um valor de display por padrão de acordo com o elemento que ele é, ou seja, o tipo de comportamento que o elemento vai ter, e esse valor padrão ele é exibido através da sua propriedade display.

Tipos de display

1. Em bloco: O block é um tipo de exibição no CSS em que o elemento ocupa toda a largura disponível do seu contêiner, empurrando os outros elementos para a linha seguinte. Esse comportamento é típico de elementos como <div>, <p>, <h1> ao <h6>, <section> entre outros.

Div: A tag div vem com o display em bloco que começa no inicio da linha e vai ocupar todo o espaço da nossa página, ele se tornará um bloco completo na página, exemplo, se adicionarmos a div e dentro dela um style de borda de 1px sólida da cor vermelha e isso vai aparecer uma linha vermelha ocupando toda a nossa página.

No código ficara assim:



E o resultado seria:

Agora vamos usar o exemplo das tags de titulo, por exemplo, se colocarmos um h1 e colocarmos dentro de uma div e colocarmos um style com borda de 1px sólida da cor vermelha, pelo fato de ter um display em bloco ele vai ficar de fora a fora da nossa página assim como o exemplo passado.

(Obs.: Para colocarmos 2 h1 nao precisamos dar a quebra de linha, pois cada um são um bloco, então ele, por padrão, já quebra a linha!)

No código ficaria de seguinte forma:



O resulta é:

Exemplo

E isso se repete para todas as tags que utilizando o display bloco.

---

2. Inline: O display inline, ou, display em linha é quando temos um elemento que ele não inicia em uma nova linha e nem ocupa da largura toda da nossa página, mas simplesmente ocupada a largura que nos especificarmos da linha, exemplo disso e a tag <a>, ou seja, caso adicionarmos um link em nossa página e não quebrarmos a linha, o link vai ficar na mesma linha que o primeiro, um do lado do outro, e caso colocarmos uma borda no primeiro link, o espaço que ela vai ocupar exatamente o tamanho do conteúdo interno dela.
   
   Podemos fazer também com que a bordar fiquei no formado inline para tags que normalmente seriam por padrão o display bloco, para isso vamos utilizar a tag <span>, veja o exemplo a seguir...
   
   
   Aqui é o exemplo!
   
   
   No código ficaria:
   
   
   As tags que são do tipo inline são: Links, imagens e o próprio span.

---

Como usar o display block e inline no CSS?

Para entendermos bem como utiliza-las, vamos criar um titulo e dois parágrafos dentro delas vamos colocar uma classe borda, porem vamos dizer que o tipo de display que queremos usar seja o inline. Já que o display padrão de um parágrafo é em bloco vamos precisar estilizar nosso parágrafo pelo CSS colocando .p e dentro das chaves vamos especificar que o display que queremos é o inline colocando display: inline; e com isso vamos perceber que nossos parágrafos não estarão com queda de linha que seria a característica do display em bloco. Para melhor entendimento, vamos criar uma nova página para mostramos o exemplo:



Veja o exemplo!

Display none

Imagine que queria esconder um elemento no nosso layout, por exemplo, vamos dizer que não queremos que aparece o primeiro parágrafo do nosso texto na página, porém que seja ativo no HTML, para termos um conteúdo ativo no nosso código porém que não apareça na página, vamos utilizar o display none. Para esse exemplo, vamos criar uma frase e esconder o próximo paragrafo da minha página, para isso, vamos batizar nossa próxima tag p de p1 o no código CSS vamos dizer que o nosso display será none, ou seja, nenhum.
O display none é bastante utilizado quando queremos que durante a construção do nosso site, que eventos dinâmicos fazem aparecer ou desaparecer elementos na nossa tela, com o javascript por exemplo, vamos ver que em um clique de um botão podemos disparar um evento, o evento poderia ser um um parágrafo aparecendo e quando clicássemos em um botão esse parágrafo aparecia ou desaparecia, mas isso veremos mais para frente.

Antes:


Depois:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt voluptate assumenda ad obcaecati a dignissimos nostrum mollitia iure nulla, laboriosam velit sapiente excepturi error perferendis quod repudiandae ipsam voluptatum nisi.

Obs: Ao utilizarmos o display inline, automaticamente o navegador vai entender que aquele elemento se tornou uma palavra, ou seja, será normal ter um espaçamento entre os elementos mesmo sem ter utilizado algum tipo de margin.

Display inline-block

Caso nos quiséssemos usar elementos com display inline porém que obedecessem as propriedades do display block nos utilizaríamos o display: inline-block que seria um mistura do display block com o display inline, nossos elementos ficariam um do lado do outro (que é a proposta do inline) porém se apropriando das propriedades e atributos do display block.
Isso se torna muito util quando estamos trabalhando com as divs, vimos na aula de HTML que utilizamos as divs para fazer as divisórias do nosso site, imagine que teríamos 3 divs, uma em baixo da outra, dentro da primeira div vamos colocar a classe azul, a segunda vai ser vermelha e a ultima será verde e dentro delas vamos escrever a palavra conteúdo somente para usarmos de exemplo.

Para chegar no resultado a cima, nosso código HTML ficou da seguinte forma:


E no CSS ficou:

Agora vamos para a próxima parte, vamos especificar a largura delas será de 33% e a altura de 150px porém atá o momentos está um em cima do outro, para colocarmos um do lado do outro nos utilizaremos a propriedade display do tipo inline, para colocarmos nossas alinhadas na mesma linha.

Conclusão

A propriedade display no CSS é essencial para controlar o comportamento e a organização dos elementos na página. Cada tipo de display block, inline, inline-block e none possui características próprias que influenciam como os elementos se posicionam e interagem entre si. O display block faz com que os elementos ocupem toda a largura disponível, forçando uma quebra de linha, enquanto o display inline permite que os elementos fiquem na mesma linha sem ocupar toda a largura. O display inline-block combina características dos dois, permitindo ajustes de largura e altura sem quebras automáticas de linha. Já o display none esconde completamente um elemento sem removê-lo do código. Compreender e utilizar corretamente a propriedade display possibilita criar layouts mais organizados, flexíveis e responsivos, tornando o desenvolvimento web mais eficiente e dinâmico.