Propriedade column-gap
Última atualização: 2026-09-13
column-gap Propriedade column-gap
A propriedade column-gap define o espaço entre colunas em um layout de várias colunas. Como parte fundamental do CSS Multi-column Layout, um espaço bem escolhido melhora visivelmente a legibilidade e a aparência do texto em várias colunas.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
column-gap: normal | <length-percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | Palavra-chave | O espaço padrão entre colunas. |
<length> | Tipo | Um espaço fixo entre colunas. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-gap | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： normal geralmente equivale a 1em (com base no tamanho da fonte atual) e é o espaço padrão.
Aviso： Um espaço muito pequeno dificulta distinguir colunas adjacentes; um muito grande desperdiça espaço e interrompe a linha de leitura. Um valor em torno de 1.5em a 2em, ou 24px a 40px, é geralmente recomendado.
❓ Perguntas Frequentes
QQual é a diferença entre column-gap e gap?
Acolumn-gap é a propriedade de espaçamento específica para layout de várias colunas; gap é a propriedade de espaçamento geral para Flexbox e Grid. Em navegadores modernos, fazem parte do mesmo sistema de espaçamento: gap também funciona em layouts de várias colunas, equivalendo a column-gap nesses casos, e cobre ainda row-gap e column-gap em flex e grid. Em um layout de várias colunas, column-gap é mais claro, enquanto gap é a escolha uniforme nos três modos de layout.
Qcolumn-gap pode usar porcentagem?
ASim. Segundo a especificação CSS Multi-column, column-gap aceita normal ou <length-percentage>, onde uma porcentagem é calculada com base na largura do contêiner de várias colunas; este é um recurso mais novo, já que especificações anteriores permitiam apenas comprimentos. Se você precisar suportar navegadores mais antigos, use unidades fixas como px ou em, pois as porcentagens podem degradar em alguns mecanismos legados. Em caso de dúvida, use um comprimento para máxima compatibilidade.
QQual é o valor padrão de column-gap?
AO padrão é normal, que os navegadores normalmente renderizam como 1em com base no tamanho da fonte atual, o que significa que o espaço escala com a fonte. Se você quiser um espaço fixo e previsível, defina um comprimento explícito como column-gap:32px. Os navegadores concordam em grande parte que normal significa 1em, mas o resultado renderizado ainda depende da fonte em uso, então o espaçamento efetivo muda quando o tamanho da fonte muda.
Qcolumn-gap tira espaço das colunas?
ANão. O espaço é reservado entre colunas: ao distribuir as larguras, o navegador primeiro subtrai a soma de todos os column-gaps e então divide a largura restante entre as colunas. Portanto, um column-gap maior deixa cada coluna mais estreita; mantenha a proporção entre o espaço e a largura da coluna razoável para que as colunas não fiquem espremidas demais para uma leitura confortável, especialmente em viewports estreitas onde cada pixel conta.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
columns (Abreviação de várias colunas)
Configure um layout de várias colunas como um todo.
column-rule
Adicione uma linha no espaço entre colunas.
