Propriedades de exibição
Propriedade Display
Determina como as caixas dos elementos devem se comportar no momento de serem exibidas na tela.
Todo elemento HTML já vem com um valor de display como padrão.
Display Block
O que é display: block?
A propriedade display: block faz com que um elemento
ocupe toda a largura disponível de seu elemento pai, criando uma
"quebra de linha" antes e depois de si mesmo. Isso significa que o
próximo elemento a ser renderizado na página será exibido em uma
nova linha.
Elementos como <div>, <p> e
<h1> são exemplos de elementos de nível de bloco
(block-level elements) que, por padrão, possuem a propriedade
display: block.
Aqui estão algumas das principais características de um elemento com
display: block:
- Ocupa toda a largura disponível de seu container.
- Empurra o conteúdo seguinte para a próxima linha (quebra de linha).
-
A largura e altura podem ser ajustadas usando propriedades CSS
como
widtheheight. - Respeita margens e padding, que afetam o espaçamento ao redor do elemento.
Exemplo de display: block
Observe como o elemento div acima ocupa toda a largura
disponível.
Display Inline
O que é display: inline?
A propriedade display: inline faz com que um elemento
ocupe apenas o espaço necessário para o seu conteúdo, sem forçar uma
quebra de linha. Diferentemente dos elementos com
display: block, os elementos inline não permitem ajuste
de altura e largura.
Exemplos comuns de elementos inline incluem
<span>, <a>, e
<strong>.
Principais características de elementos com
display: inline:
- Ocupa apenas o espaço necessário para o conteúdo.
- Não força uma nova linha no layout.
-
Não permite ajuste de
widtheheight.
Exemplo de display: inline
Veja o exemplo de texto com elementos inline:
Eu sou inline!
Eu também sou inline!
Os elementos span acima estão na mesma linha, sem
quebra.
Display Inline-Block
O que é display: inline-block?
A propriedade display: inline-block combina
características dos elementos block e
inline. Assim como elementos inline, um elemento
inline-block não força uma quebra de linha, mas, ao
contrário dos elementos inline, ele permite o ajuste de
largura e altura.
Alguns exemplos de quando inline-block é útil:
- Quando você deseja que vários elementos fiquem em uma linha, mas ainda quer ajustar sua altura e largura.
- Permite combinar layout flexível com alinhamento inline, como botões ou imagens com textos ao lado.
Exemplo de display: inline-block
Veja o exemplo de elementos com inline-block:
Eu sou inline-block!
Eu também sou inline-block!
Os elementos span acima estão na mesma linha, mas
permitem ajuste de largura e altura.
Display None
O que é display: none?
A propriedade display: none faz com que um elemento não
seja exibido na página. Ele é completamente removido do fluxo de
layout, ou seja, ele não ocupa nenhum espaço na página, como se não
existisse. Diferentemente de visibility: hidden, que
apenas esconde o elemento mas ainda o deixa ocupando espaço, o
display: none remove o elemento tanto visualmente
quanto do fluxo de layout.
Alguns usos comuns para display: none incluem esconder
elementos temporariamente até que uma ação do usuário os exiba, como
em menus dropdown ou modais.
Principais características de display: none:
- O elemento não é renderizado na tela.
- Ele não ocupa espaço no layout da página.
- Útil para esconder e exibir elementos dinamicamente com JavaScript.
Exemplo de display: none
Veja o exemplo abaixo com um elemento que será escondido:
Acima deste parágrafo está a div que foi escondida com
display: none
Exemplo de visibility: hidden
Veja o exemplo abaixo com um elemento que será escondido:
Acima deste parágrafo está a div que foi escondida com
visibility: hidden
Alinhamento de Elementos Inline
O alinhamento de elementos inline pode ser ajustado usando a
propriedade text-align no contêiner pai. Esta
propriedade alinha o conteúdo dos elementos inline horizontalmente.
Além disso, a propriedade vertical-align pode ser usada
para ajustar o alinhamento vertical dos elementos inline dentro de
uma linha.
Aqui estão os principais valores de text-align:
left: Alinha à esquerda.
center: Centraliza.
right: Alinha à direita.
E alguns valores de vertical-align:
top: Alinha o topo dos elementos da linha.
Item 1
Item 2
middle: Alinha os elementos ao meio.
Item 1
Item 2
bottom: Alinha a base dos elementos da linha.
Item 1
Item 2
Exemplo de Alinhamento de Elementos Inline
Texto alinhado com elemento inline e outro elemento inline dentro de uma linha.
Display: flex
O Flexbox é uma forma de organizar os elemntos em uma página dentro de containers de forma dinâmica, organizando os elementos eu uma única dimensão: ou horizontalmente (as linhas) ou verticalmente (em colunas).
Display: grid
O Grid Layout é uma forma de organizar os elemntos em uma página dentro de containers de forma dinâmica, organizando os elementos eu duas dimensões: horizontal e vertical, definindo linhas e colunas para que os conteúdos da página sejam posicionados seguindo uma grade.
