CSS: “padding-bottom”: “px” não é um valor válido para “padding-bottom”.

A propriedade padding-bottom define a quantidade de espaço entre o conteúdo de um elemento e a sua margem inferior. Como todas as propriedades CSS de comprimento, espera um valor de comprimento — um número emparelhado com uma unidade como px, em, rem, %, vh, etc. A string isolada px é apenas um identificador de unidade sem magnitude, então os analisadores CSS não a conseguem interpretar como uma medição significativa. Isto acontece tipicamente quando um valor numérico é acidentalmente eliminado durante a edição, quando um pré-processador CSS ou motor de templates produz uma variável vazia antes da unidade, ou quando o código é escrito manualmente com um erro tipográfico.

Quando o navegador encontra um valor inválido como padding-bottom: px, descarta toda a declaração e recorre ao valor predefinido ou herdado. Isto pode levar a mudanças inesperadas no layout, onde o espaçamento parece correto num navegador mas falha noutro dependendo de como os valores predefinidos são aplicados. Corrigir estes erros garante renderização consistente entre navegadores e mantém as suas folhas de estilo em conformidade com os padrões.

Como corrigir

1. Adicione um valor numérico antes da unidade: altere px para algo como 10px, 1.5em, ou 20%.
2. Use 0 sem unidade se quiser zero padding — escrever padding-bottom: 0 é válido e preferível a 0px.
3. Verifique variáveis de template — se está a usar um pré-processador como Sass ou um motor de templates, certifique-se de que a variável que gera o número não está vazia ou indefinida.
4. Remova completamente a declaração se padding-bottom não for necessário, em vez de deixar um valor inválido no lugar.

Exemplos

Incorreto: unidade sem um número

<div style="padding-bottom: px;">Content</div>

O valor px sozinho não é válido porque não há número especificando a quantidade de padding.

Correto: valor numérico com uma unidade

<div style="padding-bottom: 10px;">Content</div>

Correto: zero padding (sem unidade necessária)

<div style="padding-bottom: 0;">Content</div>

Incorreto numa folha de estilo externa

.card {
  padding-bottom: px;
}

Correto numa folha de estilo externa

.card {
  padding-bottom: 16px;
}

Armadilha comum do pré-processador

Em Sass ou ferramentas similares, este problema surge frequentemente de uma variável vazia ou indefinida:

$spacing: null;

.card {
  padding-bottom: #{$spacing}px; // Produz "padding-bottom: px;" se $spacing estiver vazio
}

A correção é garantir que a variável contém um número válido, ou fornecer um valor de reserva:

$spacing: 16;

.card {
  padding-bottom: #{$spacing}px; // Produz "padding-bottom: 16px;"
}

Ainda melhor, inclua a unidade na própria variável para evitar problemas de concatenação:

$spacing: 16px;

.card {
  padding-bottom: $spacing;
}

Saiba mais:

MDN Reference

MDN: padding-bottom

→