Display contents | CSS

• Display contents | CSS

🧩 O que faz display: contents

👉 Quando você usa display: contents;, o navegador faz o elemento “desaparecer” visualmente, mas mantém seus filhos como se fossem filhos diretos do elemento pai.

Ou seja:

• O elemento não gera uma caixa (box) no layout;
• Mas seus filhos continuam existindo normalmente no fluxo do documento.

---

🧠 Exemplo prático

Antes (sem display: contents)

<div class="wrapper">
  <div class="inner">
    <p>Texto 1</p>
    <p>Texto 2</p>
  </div>
</div>

.inner {
  background: lightblue;
  padding: 10px;
}

👉 Aqui, .inner cria uma caixa azul em volta dos parágrafos.

---

Depois (com display: contents)

.inner {
  display: contents;
  background: lightblue; /* <- não vai funcionar! */
  padding: 10px;         /* <- também não! */
}

👉 Agora, o elemento .inner não gera caixa nenhuma. O navegador finge que ele não existe no layout, mas os <p> continuam lá, dentro de .wrapper.

🔹 Resultado:

• Os parágrafos aparecem direto dentro do .wrapper;
• As propriedades visuais de .inner (como background e padding) não têm efeito, porque o elemento não tem mais uma “caixa”.

---

💡 Quando usar

✅ Casos úteis:

1. Em layouts com grid ou flex, quando você quer que os filhos do elemento participem diretamente do layout do contêiner pai:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.wrapper {
  display: contents;
}

<div class="container">
  <div class="wrapper">
    <div>A</div>
    <div>B</div>
  </div>
</div>

➡️ Mesmo que os elementos A e B estejam dentro de .wrapper, eles entram diretamente no grid da .container.

Sem display: contents, o grid consideraria .wrapper como um único item, o que quebraria o layout.

---

❌ Casos em que não usar:

• Se o elemento tiver estilos visuais (background, border, padding, etc.) — eles não vão aparecer.
• Se for um elemento de acessibilidade importante (como <section>, <nav>, etc.), pois o display: contents pode afetar o leitor de tela.
• Se o elemento for usado como container de referência para pseudo-elementos (::before, ::after) — eles não funcionam com display: contents.

---

🧠 Resumo

Propriedade	O que faz
display: contents	Remove a “caixa” do elemento, mas mantém seus filhos visíveis
Efeito	O elemento “desaparece” do layout
Útil para	Fazer filhos participarem do layout do pai (ex: grid/flex)
Limitação	Não dá pra aplicar background, border, padding, etc.
Cuidado com	Acessibilidade e pseudo-elementos

---

🎯 Em poucas palavras

display: contents = o elemento deixa de existir no layout, mas seus filhos continuam como se estivessem no lugar dele.

---