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

Sobre este problema de CSS

O validador W3C gera este erro quando encontra uma unidade isolada como px usada como valor para margin-bottom sem um número acompanhante. Em CSS, os valores de comprimento são sempre compostos por duas partes: um <number> e uma <unit>. O token px sozinho não é um valor <length> válido — é apenas um identificador de unidade sem magnitude. Isto acontece tipicamente devido a um erro de digitação, uma eliminação acidental da parte numérica, ou uma ferramenta de template/build que produz uma variável vazia antes da unidade.

Isto é importante por várias razões. Primeiro, os navegadores descartam completamente a declaração inválida, o que significa que margin-bottom voltará ao seu valor padrão ou herdado — provavelmente não o que você pretendia. Isto pode causar mudanças inesperadas no layout em diferentes páginas ou componentes. Segundo, CSS inválido pode tornar a depuração mais difícil, uma vez que a falha silenciosa pode não ser óbvia até o layout quebrar num contexto específico. Terceiro, CSS limpo e válido é mais fácil de manter e sinaliza qualidade de código aos colaboradores.

Como corrigir

Adicione um valor numérico antes da unidade: mude px para algo como 10px, 1.5em, ou 20%.
Use 0 sem uma unidade se quiser margem zero: margin-bottom: 0 é válido e preferível a margin-bottom: 0px.
Use um valor de palavra-chave se apropriado: margin-bottom também aceita auto, inherit, initial, revert, e unset.
Verifique variáveis de template: se estiver a usar um pré-processador como Sass ou uma framework JavaScript que injeta valores, certifique-se de que a variável não está vazia ou indefinida antes da concatenação com a unidade.

Exemplos

Incorreto: unidade isolada sem número

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

O valor px não é um valor margin-bottom válido. O navegador irá ignorar esta declaração.

Correto: valor numérico com unidade

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

Correto: margem zero (sem necessidade de unidade)

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

Correto: usando um valor de palavra-chave

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

Incorreto numa folha de estilos

<html lang="en">
<head>
  <title>Example</title>
  <style>
    .card {
      margin-bottom: px;
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Folha de estilos corrigida

<html lang="en">
<head>
  <title>Example</title>
  <style>
    .card {
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Cuidado com problemas de pré-processador

Se usar um pré-processador CSS como Sass ou Less, uma fonte comum deste erro é uma variável vazia ou indefinida:

/* Se $spacing resolver para vazio, isto produz "margin-bottom: px;" */
.card {
  margin-bottom: $spacing + px;
}

Em vez disso, certifique-se de que a variável inclui a unidade ou tem um fallback válido:

$spacing: 16px;

.card {
  margin-bottom: $spacing;
}

O mesmo princípio aplica-se a qualquer propriedade CSS que espera um valor <length> — sempre emparelhe um número com a sua unidade, ou use 0 quando não for necessário espaçamento.