Skip to main content

Display | CSS

  • Display | CSS

A propriedade display no CSS é uma das mais importantes para controlar o comportamento de um elemento no layout de uma página web. Ela determina como um elemento será exibido e como ele interage com os outros elementos ao redor.

Aqui está um resumo completo sobre o que display faz, os valores mais comuns e como usá-la.

Valores Comuns da Propriedade display​

  1. block

    • Descrição: Um elemento com display: block ocupa toda a largura disponível (da esquerda para a direita), empurrando os elementos subsequentes para a linha seguinte. Elementos como <div>, <p>, <h1>, entre outros, têm esse comportamento por padrão.
    • Comportamento: O elemento se expande para a largura total de seu contêiner e força uma quebra de linha antes e depois de si.
    div {
      display: block;
    }

  2. inline

    • Descrição: Um elemento com display: inline ocupa apenas o espaço necessário para seu conteúdo e não força uma quebra de linha. Outros elementos podem estar ao lado dele na mesma linha.
    • Comportamento: O elemento será exibido na mesma linha, ao lado de outros elementos, mas não aceita configurações de largura ou altura diretamente.
    span {
      display: inline;
    }

  3. inline-block

    • Descrição: Com display: inline-block, o elemento se comporta como um elemento inline (ou seja, permanece na mesma linha), mas aceita propriedades de largura e altura.
    • Comportamento: Permite que o elemento seja colocado na mesma linha que outros elementos, mas ainda assim você pode controlar o tamanho do elemento, como se fosse um bloco.
    button {
      display: inline-block;
      width: 100px;
      height: 40px;
    }

  4. none

    • Descrição: Um elemento com display: none não será renderizado na página. Ele não ocupa espaço no layout e é completamente removido, como se não existisse. Não confundir com visibility: hidden, que mantém o espaço do elemento ocupado.
    • Comportamento: O elemento desaparece, e o layout se ajusta como se ele não estivesse presente.
    .hidden {
      display: none;
    }

  5. flex

    • Descrição: O valor display: flex define um contêiner flexível, o que permite a organização dos seus itens internos de forma dinâmica, com controle sobre alinhamento, distribuição de espaço e direção. Os itens dentro de um contêiner flexível se tornam itens flexíveis (flex items).
    • Comportamento: Usado para criar layouts flexíveis e responsivos. Ele permite que os elementos dentro do contêiner se ajustem automaticamente conforme a tela ou o espaço disponível.
    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

  6. grid

    • Descrição: O valor display: grid define um contêiner de grade (grid container), permitindo criar layouts bidimensionais (linhas e colunas). Os itens dentro do contêiner são organizados em uma grade.
    • Comportamento: Usado para criar layouts complexos com mais controle sobre o alinhamento dos elementos em ambas as direções (horizontal e vertical).
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas */
      gap: 20px; /* Espaço entre os itens */
    }

  7. table

    • Descrição: Quando você define display: table, o elemento se comporta como uma tabela HTML (<table>), e seus filhos podem se comportar como linhas (<tr>) ou células (<td>).
    • Comportamento: Usado para layouts que se comportam de maneira semelhante a tabelas, mas sem a necessidade de usar os elementos HTML de tabela.
    .table-container {
      display: table;
    }

    .row {
      display: table-row;
    }

    .cell {
      display: table-cell;
    }

  8. list-item

    • Descrição: Com display: list-item, o elemento se comporta como um item de lista (<li>). Ele pode ser usado para criar listas personalizadas, onde o item da lista pode incluir um marcador ou número.
    • Comportamento: Útil para criar listas com marcadores ou numeração customizada.
    li {
      display: list-item;
    }

Exemplos Práticos de Uso de display​

Exemplo de block:​

<div>
  <h1>Bem-vindo ao meu site</h1>
  <p>Este é um parágrafo de texto.</p>
</div>

CSS:

h1 {
  display: block; /* Ocupa a largura inteira */
}

p {
  display: block; /* Também ocupa a largura inteira */
}

Exemplo de inline:​

<span>Texto 1</span>
<span>Texto 2</span>

CSS:

span {
  display: inline; /* Fica na mesma linha */
  color: blue;
}

Exemplo de flex:​

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between; /* Distribui os itens */
}

.container div {
  background-color: lightblue;
  padding: 10px;
}

Exemplo de grid:​

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  gap: 10px;
}

.grid-container div {
  background-color: lightgreen;
  padding: 10px;
}

Exemplo de none:​

<div id="menu">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

CSS:

#menu {
  display: none; /* Esconde o menu */
}

Resumo​

  • display: block: O elemento ocupa toda a largura disponível e força a quebra de linha.
  • display: inline: O elemento ocupa apenas o espaço necessário para o conteúdo e não força uma quebra de linha.
  • display: inline-block: O elemento se comporta como inline, mas pode ter largura e altura.
  • display: none: O elemento é removido do layout e não ocupa espaço.
  • display: flex: Usado para criar layouts flexíveis e responsivos.
  • display: grid: Usado para layouts de grade bidimensionais.
  • display: table: O elemento se comporta como uma tabela.
  • display: list-item: O elemento se comporta como um item de lista.

Caso Especial - Display inline​

  • Display inline

Quando um elemento está definido como display: inline, algumas propriedades de box model, incluindo margin-top e margin-bottom, não têm efeito. Isso acontece devido à forma como os elementos inline são tratados pelo CSS e pelo layout da página.

Comportamento dos Elementos Inline​

Elementos inline são aqueles que seguem o fluxo do texto. Eles não começam em uma nova linha e apenas ocupam a largura necessária para o seu conteúdo. O comportamento inline é típico de elementos como <span>, <a>, e <strong>, que são usados dentro de blocos de texto.

Razões Pelas Quais as Margens Verticais Não Funcionam em Elementos Inline​

  1. Fluxo do Documento: Em elementos inline, as propriedades margin-top e margin-bottom não afetam o fluxo do documento da mesma maneira que afetam os elementos block. Isso porque os elementos inline são projetados para fluir dentro de linhas de texto, onde ajustar a altura através de margens verticais interromperia o fluxo do texto.
  2. Altura da Linha: Em vez de usar margin-top e margin-bottom para ajustar a altura ou o espaçamento vertical em torno de elementos inline, o ajuste da propriedade line-height do elemento contêiner pode ser usado para controlar o espaçamento vertical entre as linhas de texto.
  3. Espaçamento Horizontal: Apesar das limitações verticais, margin-left e margin-right ainda funcionam em elementos inline, permitindo o ajuste do espaçamento horizontal entre esses elementos.

Trabalhando com Elementos Inline​

Para controlar o espaçamento vertical de elementos que naturalmente são inline, você tem algumas opções:

  • Mudar para display: block ou display: inline-block: Alterar o display para block fará com que o elemento ocupe toda a largura disponível, começando em uma nova linha, e permitirá que todas as margens funcionem como esperado. Alterar para inline-block permitirá que o elemento mantenha o comportamento inline em termos de fluxo de texto, mas tratará as propriedades de dimensionamento e margem mais como um elemento block.
elemento {
  display: inline-block;
}

  • Ajustar a line-height: Se você estiver tentando aumentar o espaçamento em torno de elementos inline dentro de um bloco de texto, ajustar a line-height do contêiner pode ser uma solução.

Conclusão​

A limitação das margens verticais em elementos inline reflete o propósito de design desses elementos: serem parte do fluxo do texto. Para espaçamento vertical, a conversão para inline-block ou o ajuste da line-height são abordagens comuns.