Propriedade Padding
Última atualização: 2026-09-13
padding Propriedade Padding
A propriedade padding define o espaço entre o conteúdo de um elemento e sua borda. Parte central do modelo de caixa do CSS, é comumente usada para dar respiro ao conteúdo dentro de um contêiner, ampliar alvos de clique e fazer o conteúdo se destacar contra um fundo. Os valores de padding só podem ser comprimentos ou porcentagens, nunca negativos, e o padding nunca sofre colapso.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
padding: <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | Tipo | Um valor de padding fixo. |
<percentage> | Tipo | Uma porcentagem relativa à largura do bloco que a contém. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| padding | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： Por padrão, o padding é adicionado fora de width/height (content-box), o que pode tornar um elemento maior que o esperado. Definir box-sizing:border-box inclui o padding dentro da largura e altura especificadas.
Dica： O padding em porcentagem é sempre calculado em relação à largura do bloco que a contém, incluindo padding-top e padding-bottom.
❓ Perguntas Frequentes
QO padding pode ser negativo?
ANão. O padding aceita apenas comprimentos ou porcentagens e nunca pode ser negativo; um valor negativo é tratado como uma declaração inválida e ignorado. Se você precisa empurrar o conteúdo para fora, reduza o padding ou use uma margin negativa, que é permitida e puxa o elemento inteiro para fora. Lembre-se de que o padding só pode comprimir o conteúdo para dentro, nunca estendê-lo para fora.
QO padding afeta a área de fundo?
ASim. O background-color é pintado sobre a área de padding, já que o padding é parte do fundo da caixa, mas não se estende na área de margin. Mais padding significa um fundo pintado maior, e aumentar o padding é a forma mais direta de ampliar a área clicável de um botão e torná-lo mais cheio. border-radius também recorta o fundo dentro da área de padding.
QA porcentagem do padding é relativa a quê?
AO padding em porcentagem é sempre resolvido em relação à largura do bloco que a contém, incluindo padding-top e padding-bottom, que são calculados a partir da largura em vez da altura. Essa peculiaridade alimenta o truque clássico de contêiner proporcional, o hack de padding-top: padding-top:56,25% (16:9) empurra a altura para fora, que era a abordagem padrão antes de existir aspect-ratio. Funciona porque a porcentagem ignora a altura completamente e sempre se refere à largura.
QPor que um elemento fica maior quando adiciono padding?
APorque com o content-box padrão, o width cobre apenas a área de conteúdo, e padding e border são adicionados por cima, aumentando a área total ocupada pelo elemento. Mudar para box-sizing:border-box faz o width incluir padding e border, então o conteúdo encolhe para dentro e a largura total permanece a mesma. É por isso que border-box é recomendado globalmente; sem ele, todo elemento com padding fica mais largo que a largura que você realmente escreveu.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade box-sizing
Controle se o padding conta para o tamanho total de um elemento.
margin (Propriedade Margin)
Aprenda sobre o espaço fora de um elemento.
