Propriedade display: block, inline e inline-block

No CSS, a propriedade display é uma das mais fundamentais e poderosas. Ela define como um elemento HTML é exibido na página, ou seja, como ele se comporta em relação a outros elementos e como ele ocupa o espaço. Compreender os diferentes valores de display é crucial para construir qualquer layout web.

Pense na propriedade display como a "personalidade" de um elemento. Alguns elementos são "extrovertidos" e gostam de ocupar todo o espaço disponível (block), outros são mais "tímidos" e só ocupam o espaço que precisam (inline), e há os que são um pouco dos dois (inline-block).

Os Três Valores Fundamentais de `display`

1. `display: block` (Elementos de Bloco)

Comportamento:
- Ocupa toda a largura disponível do seu contêiner, mesmo que seu conteúdo seja pequeno.
- Sempre começa em uma nova linha e força o próximo elemento a começar em uma nova linha.
- Aceita as propriedades width, height, padding, margin (todos os lados) e border.
Analogia: É como um tijolo em uma parede. Cada tijolo ocupa uma linha inteira e o próximo tijolo começa na linha de baixo.
Exemplos de elementos HTML que são block por padrão: div, p, h1 a h6, ul, ol, li, form, header, footer, section, article.

2. `display: inline` (Elementos Inline)

Comportamento:
- Ocupa apenas a largura necessária para o seu conteúdo.
- Não começa em uma nova linha e permite que outros elementos inline fiquem ao seu lado na mesma linha.
- Não aceita as propriedades width e height.
- Aceita padding e border (mas o padding vertical e a border vertical podem se sobrepor ao conteúdo das linhas acima/abaixo).
- Aceita margin-left e margin-right, mas não aceita margin-top e margin-bottom.
Analogia: É como palavras em uma frase. Elas ficam uma ao lado da outra e só ocupam o espaço que precisam.
Exemplos de elementos HTML que são inline por padrão: span, a, strong, em, img, input, label, select, textarea.

3. `display: inline-block` (Elementos Inline-Block)

Comportamento:
- É uma combinação dos dois anteriores:
  - Comporta-se como um elemento inline em relação ao fluxo do documento (ou seja, não começa em uma nova linha e permite que outros elementos fiquem ao seu lado).
  - Comporta-se como um elemento block em relação às suas próprias propriedades (ou seja, aceita width, height, padding, margin (todos os lados) e border).
Analogia: É como uma caixa pequena que você pode colocar lado a lado com outras caixas pequenas, mas que ainda assim tem suas próprias dimensões e espaçamentos internos/externos bem definidos.
Uso: Muito útil para criar menus de navegação, galerias de imagens ou qualquer layout onde você precisa de elementos que fiquem lado a lado, mas que também possam ter largura, altura e margens verticais.

Alterando o `display` de um Elemento

Você pode alterar o comportamento padrão de qualquer elemento HTML usando a propriedade display no CSS.

Exemplo: Se você quiser que um span (que é inline por padrão) ocupe toda a largura e aceite height, você pode fazer span { display: block; }.
Exemplo: Se você quiser que uma div (que é block por padrão) fique lado a lado com outras divs e aceite width e height, você pode fazer div { display: inline-block; }.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Display</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .section {
      background-color: #e0e0e0;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;
    }

    h2 {
      margin-top: 0;
      margin-bottom: 10px;
      color: #333;
    }

    /* Estilos para elementos de Bloco */
    .block-element {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 10px;
      margin: 10px 0; /* Margem vertical funciona */
      width: 200px; /* Largura funciona */
      height: 50px; /* Altura funciona */
      color: #333;
    }

    /* Estilos para elementos Inline */
    .inline-element {
      background-color: lightgreen;
      border: 1px solid green;
      padding: 5px; /* Padding funciona, mas vertical pode sobrepor */
      margin: 0 5px; /* Margem horizontal funciona, vertical não */
      /* width: 100px; height: 30px; */ /* Estas propriedades NÃO TERIAM EFEITO */
      color: #333;
    }

    /* Estilos para elementos Inline-Block */
    .inline-block-element {
      background-color: lightcoral;
      border: 1px solid red;
      padding: 10px;
      margin: 10px; /* Margem vertical e horizontal funcionam */
      width: 150px; /* Largura funciona */
      height: 70px; /* Altura funciona */
      color: #333;
      display: inline-block; /* Essencial para o comportamento */
    }
  </style>
</head>
<body>
  <div class="section">
    <h2>`display: block`</h2>
    <div class="block-element">Eu sou um Bloco 1</div>
    <div class="block-element">Eu sou um Bloco 2</div>
    <p>Note como cada bloco ocupa sua própria linha e aceita largura/altura.</p>
  </div>

  <div class="section">
    <h2>`display: inline`</h2>
    <p>Este é um texto com um <span class="inline-element">elemento inline 1</span> e outro <span class="inline-element">elemento inline 2</span>. Eles ficam lado a lado e não aceitam largura/altura.</p>
    <p>Note que o padding vertical pode se sobrepor ao texto da linha acima/abaixo.</p>
  </div>

  <div class="section">
    <h2>`display: inline-block`</h2>
    <div class="inline-block-element">Inline-Block 1</div>
    <div class="inline-block-element">Inline-Block 2</div>
    <div class="inline-block-element">Inline-Block 3</div>
    <p>Note como eles ficam lado a lado, mas aceitam largura/altura e margens verticais.</p>
  </div>

  <div class="section">
    <h2>Alterando o `display`</h2>
    <p>Uma <span style="display: block; background-color: yellow; margin: 5px; padding: 5px; width: 100px; height: 30px;">span que virou bloco</span>.</p>
    <div style="display: inline; background-color: orange; padding: 5px; margin: 5px;">Uma div que virou inline</div>
    <div style="display: inline; background-color: orange; padding: 5px; margin: 5px;">Outra div inline</div>
  </div>
</body>
</html>

Resultado: Inspecione os elementos com as ferramentas de desenvolvedor para ver como cada tipo de display afeta o Box Model e o fluxo do documento.

Boas Práticas:

Entenda o Padrão: Saiba qual é o display padrão dos elementos HTML que você está usando.
Use o display Correto: Escolha o display que melhor se adapta ao comportamento que você deseja para o elemento.
inline-block para Layouts Simples: Para elementos que precisam ficar lado a lado e ter dimensões controladas, inline-block é uma ótima opção.
Flexbox e Grid: Para layouts mais complexos e responsivos, display: flex; e display: grid; são as ferramentas modernas e mais poderosas, que veremos em módulos futuros. Eles oferecem um controle muito maior sobre o posicionamento e alinhamento.

Dominar a propriedade display é um passo fundamental para controlar o layout da sua página e organizar os elementos de forma eficaz.

Os Três Valores Fundamentais de display

1. display: block (Elementos de Bloco)

2. display: inline (Elementos Inline)

3. display: inline-block (Elementos Inline-Block)