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

Sobre este problema de CSS

Quando o validador W3C reporta que "px" não é um valor válido para margin-left, significa que a declaração CSS está a faltar o seu componente numérico. Uma unidade isolada como px não tem significado por si só — o CSS precisa de saber quantos pixels você quer. Isto acontece tipicamente devido a um erro de escrita, uma eliminação acidental, ou uma ferramenta de templating/build que produziu uma variável vazia antes da unidade.

Isto é importante porque os navegadores irão descartar toda a declaração como inválida, o que significa que margin-left irá reverter para o seu valor padrão ou herdado. Isto pode causar mudanças inesperadas no layout e fazer com que o seu design se comporte de forma inconsistente. A questão aplica-se igualmente a qualquer propriedade de comprimento CSS, não apenas margin-left.

Valores válidos para `margin-left`

A propriedade margin-left aceita:

Um valor de comprimento: um número seguido de uma unidade, como 10px, 2em, 1.5rem, 5vw
Uma percentagem: por exemplo, 5%
A palavra-chave auto
O valor 0 (que não requer unidade)

Uma unidade sem um número precedente (como px, em, ou %) nunca é válida.

Exemplos

Incorreto: unidade sem número

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

O navegador não consegue interpretar px sozinho e irá ignorar completamente a declaração.

Correto: número com uma unidade

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

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

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

Incorreto: variável vazia num template

Esta questão aparece frequentemente quando um valor dinâmico está em falta. Por exemplo, num template:

<!-- Se "spacing" estiver vazio, isto produz "margin-left: px;" -->

<div style="margin-left: {{spacing}}px;">Conteúdo</div>

Para se proteger contra isto, certifique-se de que a variável sempre contém um número válido, ou forneça um valor padrão de reserva.

Correto: usando propriedades personalizadas CSS com um valor de reserva

Se estiver a trabalhar com propriedades personalizadas CSS, pode usar var() com um valor de reserva para prevenir declarações inválidas:

<div style="margin-left: var(--spacing, 10px);">Conteúdo</div>

Correto: numa folha de estilos externa

Se a questão estiver numa folha de estilos ligada em vez de estilos inline, a mesma correção aplica-se:

/* Incorreto */
.sidebar {
  margin-left: px;
}

/* Correto */
.sidebar {
  margin-left: 20px;
}

Lista de verificação rápida

Certifique-se de que cada valor de comprimento tem um número antes da unidade (por exemplo, 16px, 1em, 2rem).
Se não quiser margem, use 0 — é o único valor numérico que não precisa de uma unidade.
Se usar templates ou pré-processadores, verifique que as variáveis resolvem para números reais antes de serem concatenadas com unidades.
Considere usar calc() do CSS se precisar de valores calculados: margin-left: calc(2em + 4px);.