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

A propriedade margin-top aceita vários tipos de valores: comprimentos (como 10px, 1.5em, 2rem), percentagens (como 5%), a palavra-chave auto, ou o valor 0. Quando você escreve margin-top: px, o browser encontra uma unidade isolada sem número associado, o que não faz sentido — não sabe quantos pixels você quer. Os browsers irão ignorar completamente a declaração inválida, o que significa que margin-top irá reverter para o seu valor padrão ou herdado. Isto pode levar a resultados de layout inesperados que podem diferir entre browsers.

Este erro acontece normalmente devido a um erro de digitação, uma eliminação acidental da parte numérica, ou uma ferramenta de templating/build que falhou ao interpolar uma variável (p.ex., margin-top: ${value}px onde value estava vazio). Também pode ocorrer quando se edita CSS rapidamente e se remove o número com a intenção de o alterar.

Além de margin-top, este mesmo princípio aplica-se a todas as propriedades CSS que aceitam valores de comprimento — margin, padding, width, height, font-size, border-width, e muitas outras. Uma unidade isolada sem número nunca é válida.

Nota: O valor 0 é o único comprimento numérico que não requer uma unidade. Escrever margin-top: 0 é perfeitamente válido e equivalente a margin-top: 0px.

Como corrigir

1. Adicione o número em falta antes da unidade. Determine o espaçamento que precisa e adicione-o antes da unidade (p.ex., 10px, 1.5em).
2. Use uma palavra-chave válida se não precisar de um valor numérico específico — auto ou inherit, por exemplo.
3. Verifique as variáveis do template se usar um pré-processador ou sistema de templating. Certifique-se de que a variável que fornece o número está definida e não está vazia.

Exemplos

Incorreto: unidade isolada sem número

<div style="margin-top: px;">Content</div>

O validador reporta que "px" não é um valor válido para margin-top porque não tem um componente numérico.

Correto: número seguido de uma unidade

<div style="margin-top: 10px;">Content</div>

Correto: usar zero sem unidade

<div style="margin-top: 0;">Content</div>

Correto: usar um valor palavra-chave

<div style="margin-top: auto;">Content</div>

Incorreto numa folha de estilos

<style>
  .box {
    margin-top: px;
  }
</style>
<div class="box">Content</div>

Correto numa folha de estilos

<style>
  .box {
    margin-top: 16px;
  }
</style>
<div class="box">Content</div>

Incorreto com output de pré-processador CSS

Se usar um pré-processador como Sass ou uma framework JavaScript, uma variável indefinida ou vazia pode produzir este erro:

<!-- Se a variável estava vazia, o output renderizado torna-se: -->

<div style="margin-top: px;">Content</div>

Certifique-se de que a variável tem um valor numérico válido para que o CSS renderizado esteja completo:

<div style="margin-top: 20px;">Content</div>

Saiba mais:

MDN Reference

MDN: margin-top

→