15.04.2025

A Questão das Margens com Display: Table-Cell em CSS

Resposta Rápida

Para um elemento com display: table-cell;, a propriedade de margem não é aplicável, pois imita o comportamento do elemento HTML <td>, que prefere o padding em vez disso. Para definir margens externas, envolva o elemento dentro de uma <div> e aplique a margem nesse contêiner.

<div style="margin: 10px;">
  <div style="display: table-cell; padding: 10px;">
    Uma célula com padding.
  </div>
</div>

Para definir margem, use um envoltório ao redor da célula. O espaçamento interno da célula é atribuído através do padding. A propriedade table-cell impede que a célula utilize margens externas diretamente.

Por Que o "Display: Table-Cell" Comporta-se Assim?

Usando o Elemento Pai para Definir Espaçamento

Uma vez que a propriedade display: table-cell; é aplicada, o elemento div adquire as características de uma célula de tabela semelhante ao HTML <td>. A limitação de margem é explicada por esse recurso. Para definir o espaço entre elementos configurados com display: table-cell;, utiliza-se a propriedade border-spacing do elemento pai com display: table;.

.table {
  display: table;
  border-spacing: 10px; /* responsável pelo espaçamento entre divs convertidas em células */
}

Organize a estrutura da seguinte forma:

<div class="table">
  <div class="cell">
    Deixe sua "célula de tabela" respirar também!
  </div>
</div>

Criando Espaço Dentro da Célula

Para um elemento com display: table-cell;, a fonte de criação de espaço é o padding.

.cell {
  display: table-cell;
  padding: 10px; /* cria espaço definido dentro da célula da tabela */
  border: 1px solid black; /* mostra visualmente os limites */
}

Usando Bordas Transparentes para Criar Lacunas

Uma abordagem alternativa envolve o uso de bordas transparentes na célula da tabela. No entanto, lembre-se que você não pode definir o tamanho da borda em porcentagens.

.cell {
  display: table-cell; 
  border: 10px solid transparent; /* bordas transparentes – uma solução elegante! */
}

Diferença no Espaçamento Horizontal e Vertical

Se você precisar de intervalos diferentes horizontal e verticalmente, border-spacing pode receber dois valores diferentes:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px 10px; /* separação horizontal e vertical – uma forma de explorar toda a gama de possibilidades! */
}

Simulando Margens em Table-Cell

Sonhando com um efeito semelhante a margens? Adicione um <div> ou <span> interno com uma largura especificada para simular uma margem exterior:

<div class="cell">
  <span style="width:10px;">Não estamos simulando margens... É apenas uma ilusão de ótica!</span>
</div>

Organizando Múltiplas Células em Uma Linha

Para organizar várias células em uma única linha, defina .row {display: table-row;}:

<div class="table">
  <div class="row">
    <div class="cell">Célula 1: Aqui começa nossa jornada!</div>
    <div class="cell">Célula 2: E continuamos aqui! Está se tornando maravilhoso!</div>
  </div>
</div>

Visualização

Vamos considerar um exemplo específico de como margin interage com um div estilizado como table-cell:

Imagine um arranjo de mesa:

|🍽️ Prato (Conteúdo)   |🚫 Vazio (Margem)          |
| --------------------- | ------------------------  |
| 🍛 Curry (div aninhado)| ➡️ (Não funcional)        |

Div com o estilo table-cell;, semelhante ao curry em um prato:

| 🍽️ Prato  |
| ---------- |
| 🍛 Curry   |

As margens não criarão espaço ao redor do curry porque, assim como células em table-cell, elas são feitas para localização próxima. Elas formam um único elemento coeso e funcional, assim como elementos com display: table-cell.

Recursos Úteis

1. display - CSS: Folhas de Estilo em Cascata | MDN — Um recurso essencial para conhecimento aprofundado sobre as propriedades display: table-cell.
2. display | CSS-Tricks - CSS-Tricks — Um artigo detalhado que fornece uma compreensão clara das várias opções display: table-cell.
3. html - Como (e por que) usar display: table-cell (CSS) - Stack Overflow — Uma discussão envolvente focada na aplicação prática e especificidades de uso.
4. Estilizando Tabelas em CSS — Um guia abrangente para estilização de tabelas em CSS.
5. Introdução ao modelo básico de caixas CSS - CSS: Folhas de Estilo em Cascata | MDN — Uma introdução detalhada ao modelo de caixa CSS da MDN, explicando por que as margens não funcionam com table-cell.
6. Tabelas — Especificações W3C que oferecem uma visão detalhada do modelo de tabelas em CSS.
7. display em CSS — Um guia passo a passo com exemplos fornecendo recomendações sobre o uso da propriedade display em CSS.

Video

Navigation