CSS: "margin-top": "px" não é um valor válido de "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 navegador encontra uma unidade isolada sem um número associado, o que não faz sentido — ele não sabe quantos pixels você quer. Os navegadores 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 navegadores.

Este erro acontece comumente devido a um erro de digitação, uma eliminação acidental da parte numérica, ou uma ferramenta de templating/build que falhou em interpolar uma variável (por exemplo, margin-top: ${value}px onde value estava vazio). Também pode ocorrer ao editar CSS rapidamente e remover o número enquanto pretende alterá-lo.

Para 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 um 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 (por exemplo, 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 de 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 de margin-top porque lhe falta um componente numérico.

Correto: número seguido de uma unidade

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

Correto: usando zero sem uma unidade

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

Correto: usando um valor de 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 estivesse 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

→