Verificação HTML: CSS: "margin-right": "px" não é um valor "margin-right".

Sobre este problema de CSS

Quando escreve margin-right: px, o navegador não consegue determinar que margem aplicar porque px sozinho não é um valor CSS reconhecido — é apenas um sufixo de unidade sem uma quantidade. Os valores de comprimento CSS são sempre uma combinação de um número e uma unidade (por exemplo, 10px, 1.5em, 20%), ou uma palavra-chave específica como auto, inherit, ou 0 (que não requer uma unidade). O px isolado não tem significado por si só e será ignorado pelos navegadores, o que significa que o espaçamento pretendido não será aplicado.

Este problema surge tipicamente em alguns cenários comuns:

Um número foi acidentalmente eliminado durante a edição, deixando apenas a unidade.
Uma variável de pré-processador CSS ou expressão de template falhou ao gerar um valor, resultando em apenas a unidade ser renderizada.
Um erro de digitação ou colar removeu a parte numérica.

Além de simplesmente não funcionar, CSS inválido pode causar diferenças de renderização imprevisíveis entre navegadores. Também torna o seu código mais difícil de manter, pois outros programadores podem não compreender o valor pretendido.

Para corrigir isto, determine que valor numérico pretendia e coloque-o diretamente antes da unidade px sem qualquer espaço entre o número e a unidade. Se não for necessária margem, remova a propriedade inteiramente ou defina-a como 0.

Exemplos

Incorreto: unidade sem um número

<div style="margin-right: px;">Conteúdo</div>

O validador reporta que px não é um valor margin-right válido porque nenhum número precede a unidade.

Corrigido: valor completo com número e unidade

<div style="margin-right: 10px;">Conteúdo</div>

Corrigido: usando zero (não é necessária unidade)

<div style="margin-right: 0;">Conteúdo</div>

Quando o valor é 0, não é necessária qualquer unidade pois zero é igual em todas as unidades.

Corrigido: usando um valor de palavra-chave

<div style="margin-right: auto;">Conteúdo</div>

A palavra-chave auto é um valor válido para margin-right e é comumente usada para centrar ou empurrar elementos.

Cuidado com problemas de pré-processador ou template

Se está a usar um pré-processador CSS ou uma linguagem de template, certifique-se de que as suas variáveis se resolvem em valores completos:

/* Incorreto — se $spacing estiver vazio, isto gera "margin-right: px;" */
.sidebar {
  margin-right: px;
}

/* Correto */
.sidebar {
  margin-right: 16px;
}

Outras unidades válidas

Qualquer unidade de comprimento CSS válida funciona, desde que seja precedida por um número:

<div style="margin-right: 2em;">Margem baseada em em</div>
<div style="margin-right: 5%;">Margem baseada em percentagem</div>
<div style="margin-right: 1.5rem;">Margem baseada em rem</div>