Propriedade de Espaçamento Gap
Última atualização: 2026-09-13
gap Propriedade de Espaçamento Gap
A propriedade gap define o espaçamento entre linhas e colunas em layouts flex e grid. É um atalho para row-gap e column-gap. O gap adiciona espaço apenas entre os itens e nunca nas bordas do contêiner, o que o torna mais limpo e previsível do que as margens. Ele elimina o incômodo habitual de limpar as primeiras e últimas margens no espaçamento tradicional baseado em margin.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
gap: normal | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | Palavra-chave | Espaçamento padrão |
<length> | <percentage> | Tipo | Espaçamento de linhas e colunas |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| gap | ✓ v66 | ✓ v16 | ✓ v61 | ✓ v10.1 | ✓ v53 |
| Suportado em todos os principais navegadores | |||||
Dica： Os dois valores de gap mapeiam para row-gap e column-gap: gap: 10px 20px significa 10px entre linhas e 20px entre colunas. Um único valor se aplica a ambos.
Importante： O gap só funciona em layouts flex e grid; não tem efeito em layout de bloco normal. Use margin quando precisar de espaçamento entre elementos de bloco.
❓ Perguntas Frequentes
QQual é a diferença entre gap e margin?
AO gap cria espaço apenas entre os itens e nunca adiciona espaço nas bordas do contêiner, então não há primeiro ou último gap para limpar. A margin cria espaço em todos os lados de um elemento, então as margens primeira e última precisam de tratamento especial, e as margens podem interferir nos cálculos de dimensionamento do flex ou grid. Prefira gap para espaçamento interno do layout e deixe margin para o espaço entre um elemento e o que está fora dele.
QComo é o suporte dos navegadores para gap?
AEm layouts flex, o gap é totalmente suportado a partir do Chrome 84, Firefox 63 e Safari 14.1; em layouts grid, foi suportado muito antes (Chrome 66+, Safari 12+). Valores em porcentagem também são suportados e resolvidos em relação ao tamanho do contêiner. Para dar suporte a navegadores mais antigos, implemente primeiro o espaçamento com margin como fallback e, em seguida, use uma consulta de recurso @supports (gap: 1px) para mudar para a nova sintaxe.
QQual é a diferença entre gap e grid-gap, e por que gap é recomendado agora?
Agrid-gap era a sintaxe antiga que se aplicava apenas ao grid, junto com grid-row-gap e grid-column-gap. Mais tarde, a especificação estendeu gap para layouts flex, grid e multi-coluna e renomeou a propriedade. O gap agora é o atalho para row-gap e column-gap, e essas propriedades independentes continuam válidas e úteis quando apenas uma direção precisa de um valor personalizado. Todos os navegadores modernos suportam gap; grid-gap é a forma legada, então novos códigos devem usar gap.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Row Gap
Define o espaçamento apenas entre linhas
Column Gap
Define o espaçamento apenas entre colunas
