Verificação HTML: CSS: "padding-left": "px" não é um valor "padding-left".

Sobre este problema de CSS

A propriedade padding-left aceita um valor de comprimento CSS válido, uma percentagem, ou a palavra-chave 0. Um comprimento CSS é sempre composto por duas partes: um número e uma unidade (por exemplo, 10px, 2em, 1.5rem). Escrever apenas px sem número é sintaticamente inválido — é uma unidade nua sem magnitude, pelo que o navegador não consegue determinar que espaçamento aplicar. Isto ocorre frequentemente devido a um erro de digitação, uma variável em falta num template ou preprocessador, ou apagar acidentalmente a porção numérica durante a edição.

Quando o validador encontra isto num atributo style, sinaliza o valor como CSS inválido. Embora a maioria dos navegadores simplesmente ignore a declaração malformada e recorra ao padding padrão, depender deste comportamento de recuperação de erros leva a layouts imprevisíveis. Corrigir o problema garante que os seus estilos são aplicados consistentemente em todos os navegadores e que o seu markup passa na validação.

Como corrigir

Adicione um valor numérico antes da unidade: mude px para algo como 10px, 1em, ou 5%.
Se quiser padding zero, use 0 — não é necessária unidade (embora 0px também seja válido).
Verifique variáveis de template e preprocessadores. Se está a usar um sistema como PHP, templating JavaScript, ou um preprocessador CSS (Sass, Less), certifique-se de que a variável que deveria fornecer o número não está vazia ou indefinida. Por exemplo, padding-left: <?= $indent ?>px; irá produzir padding-left: px; se $indent estiver vazio.

Exemplos

Incorreto: unidade nua sem número

<div style="padding-left: px;">Conteúdo</div>

O valor px não tem componente numérico, pelo que não é um comprimento válido.

Correto: valor numérico antes da unidade

<div style="padding-left: 10px;">Conteúdo</div>

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

<div style="padding-left: 0;">Conteúdo</div>

Incorreto: variável vazia produzindo uma unidade nua

Esta é uma fonte comum do bug em HTML gerado por templates ou dinamicamente:

<!-- Se a variável estiver vazia, isto renderiza como "padding-left: px;" -->

<div style="padding-left: px;">Conteúdo</div>

Correto: garantir um valor de fallback

Ao gerar estilos dinamicamente, forneça sempre um padrão sensato para que o output seja válido mesmo se a variável estiver em falta:

<div style="padding-left: 16px;">Conteúdo</div>

Usar uma folha de estilos externa

A mesma regra aplica-se em CSS externo ou incorporado. A versão incorreta:

.sidebar {
  padding-left: px;
}

A versão corrigida com um valor numérico adequado:

.sidebar {
  padding-left: 20px;
}

Outros valores `padding-left` válidos

Qualquer comprimento CSS válido ou percentagem funciona:

<div style="padding-left: 2em;">Padding baseado em em</div>
<div style="padding-left: 1.5rem;">Padding baseado em rem</div>
<div style="padding-left: 5%;">Padding baseado em percentagem</div>