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

A propriedade padding-right define a quantidade de espaço entre o conteúdo de um elemento e a sua margem direita. Como todas as propriedades de comprimento CSS, ela espera um valor de comprimento válido (um número emparelhado com uma unidade como px, em, rem, %, vw, etc.), a palavra-chave 0 (que não precisa de unidade), ou as palavras-chave inherit/initial/unset. Uma unidade isolada como px sem número não tem significado — não diz ao navegador quanto padding aplicar.

Este erro ocorre tipicamente devido a um erro de digitação, um problema de template onde uma variável falhou ao renderizar, ou eliminação acidental da parte numérica do valor. Por exemplo, um template como padding-right: {{ value }}px; pode produzir padding-right: px; se value estiver vazio ou indefinido.

Quando o navegador encontra um valor inválido como px, descarta toda a declaração e reverte para o valor padrão ou herdado para padding-right. Isto pode levar a diferenças de layout inesperadas entre navegadores e torna as suas intenções pouco claras para outros programadores. Corrigir estes erros de validação também ajuda a manter folhas de estilo limpas e previsíveis.

Como corrigir

1. Adicione o número em falta antes da unidade: altere px para um valor específico como 10px.
2. Use 0 sem unidade se não quiser padding: padding-right: 0; é válido e preferível a padding-right: 0px;.
3. Verifique variáveis de template e geração dinâmica de estilos para garantir que os valores numéricos são sempre produzidos corretamente.

Exemplos

Incorreto: unidade isolada sem número

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

O valor px não é válido porque não possui um componente numérico.

Correto: valor numérico com unidade

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

Correto: padding zero (não é necessária unidade)

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

Correto: usando outras unidades válidas

<div style="padding-right: 2em;">Content</div>

<div style="padding-right: 5%;">Content</div>

Incorreto numa folha de estilo externa

.sidebar {
  padding-right: px;
}

Corrigido numa folha de estilo externa

.sidebar {
  padding-right: 16px;
}

Proteção contra valores vazios em templates

Se você gerar CSS dinamicamente, certifique-se de que o valor numérico está sempre presente. Por exemplo, forneça um valor de fallback:

.sidebar {
  padding-right: 16px; /* padrão seguro */
}

Em vez de depender de um template que pode produzir um valor vazio, considere definir padrões no seu CSS e sobrepor apenas com estilos inline quando tiver a certeza de que o valor é válido.

Saiba mais:

MDN Reference

MDN: padding-right

→