Display no CSS

Tempo de leitura: 3 minutos

Display no CSS: A propriedade display em CSS é uma das mais poderosas para controlar a forma como os elementos HTML são exibidos na página. Ela define o tipo de caixa que um elemento gera e influencia diretamente o layout da página. Ao dominar o display, você poderá criar layouts flexíveis, responsivos e personalizados, adaptando sua página a diferentes dispositivos e tamanhos de tela.

Neste artigo, vamos explorar em detalhes os diferentes valores da propriedade display e suas aplicações.

O que é Display?

A propriedade display determina o tipo de caixa que um elemento gera e como ele interage com outros elementos. Os valores mais comuns para display são:

• block: O elemento gera uma caixa de bloco, ocupando toda a largura disponível e quebrando a linha.
• inline: O elemento gera uma caixa inline, que não quebra a linha e se ajusta ao tamanho do conteúdo.
• inline-block: Combina as características de block e inline, permitindo que o elemento tenha largura e altura definidas, mas sem quebrar a linha.
• none: O elemento não é exibido.

Valores Comuns e seus Efeitos

• block:
  • Cria uma nova linha para o elemento.
  • Ocupa toda a largura disponível.
  • É o valor padrão para elementos como <p>, <h1>, <div>, etc.
• inline:
  • Não cria uma nova linha.
  • A largura do elemento é determinada pelo conteúdo.
  • É o valor padrão para elementos como <span>, <a>, <strong>, etc.
• inline-block:
  • Combina as características de block e inline.
  • Permite definir largura e altura.
  • Não quebra a linha.
• none:
  • O elemento não é exibido na página.
  • Útil para ocultar elementos com JavaScript ou para criar efeitos visuais.

Outros Valores Importantes

Além dos valores mencionados acima, existem outros valores para display que são úteis para criar layouts mais complexos:

• flex: Cria um elemento flex, que pode ser usado em conjunto com o modelo de layout flexbox.
• grid: Cria um elemento grid, que pode ser usado em conjunto com o modelo de layout grid.
• table: Transforma o elemento em uma tabela.
• table-cell: Transforma o elemento em uma célula de tabela.
• table-row: Transforma o elemento em uma linha de tabela.

Exemplos Práticos

HTML

<div class="block">Este é um elemento block</div>
<span class="inline">Este é um elemento inline</span>
<div class="inline-block">Este é um elemento inline-block</div>
<div class="none">Este elemento não será exibido</div>

CSS

.block {
  display: block;
  background-color: lightblue;
  padding: 10px;
}

.inline {
  display: inline;
  background-color: lightgreen;
  padding: 10px;
}

.inline-block {
  display: inline-block;
  background-color: lightpink;   
  padding: 10px;
}

.none {
  display: none;
}

Flexbox e Grid

Os valores flex e grid são usados para criar layouts mais flexíveis e responsivos. Eles permitem organizar elementos em linhas e colunas de forma dinâmica.

CSS

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  background-color: lightgray;
  margin: 10px;
}

Neste exemplo, os elementos com a classe item serão distribuídos igualmente dentro do container, ocupando todo o espaço disponível.

Considerações Adicionais

• Herança: A propriedade display é herdada pelos elementos filhos.
• Responsividade: Utilize display em conjunto com media queries para criar layouts que se adaptam a diferentes tamanhos de tela.
• Acessibilidade: Certifique-se que as mudanças no display não afetem a acessibilidade da sua página.

Conclusão

Display no CSS: A propriedade display é fundamental para controlar a exibição dos elementos em suas páginas web. Ao dominar os diferentes valores de display, você poderá criar layouts personalizados, flexíveis e responsivos. Experimente diferentes combinações de display com outras propriedades CSS para criar designs únicos e inovadores.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: