Skip to main content
Validação HTML

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

Sobre este problema de CSS

O validador W3C reporta este erro quando encontra padding-top: px; — uma unidade sem componente numérico. Em CSS, os valores de comprimento são compostos por duas partes: um número e um identificador de unidade (por exemplo, px, em, rem, %, vh). A unidade isolada não tem significado sem um número para a quantificar. Isto normalmente acontece devido a um erro de digitação, uma variável de pré-processador que resolveu para um valor vazio, ou apagar acidentalmente o número durante a edição.

Isto é importante por várias razões. Os navegadores descartarão completamente a declaração inválida, o que significa que padding-top voltará ao seu valor predefinido ou herdado — que pode não ser o que você pretendia. Isto pode causar diferenças de layout imprevisíveis entre navegadores. Adicionalmente, CSS inválido pode interferir com a análise de declarações subsequentes no mesmo bloco de regras, potencialmente causando que outros estilos sejam também ignorados.

Para corrigir este problema:

  1. Adicione um valor numérico antes da unidade: mude px para algo como 10px, 1.5em, ou 20%.
  2. Use 0 sem unidade se quiser padding zero: padding-top: 0; é válido e preferível a padding-top: 0px;.
  3. Verifique variáveis de pré-processador (Sass, Less, etc.) para garantir que resolvem para valores completos, não apenas unidades.
  4. Remova completamente a declaração se padding-top não precisar de ser definido.

Exemplos

Incorreto: unidade sem número

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

O valor px não é um valor de padding-top válido porque falta um componente numérico.

Correto: número com unidade

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

Correto: padding zero (sem necessidade de unidade)

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

Incorreto numa folha de estilos externa

.header {
  padding-top: px;
}

Correto numa folha de estilos externa

.header {
  padding-top: 16px;
}

Armadilha comum em pré-processadores

Se usar um pré-processador CSS como Sass, tenha cuidado com variáveis que podem estar vazias ou indefinidas:

/* Se $spacing de alguma forma resolver para vazio, isto produz "padding-top: px;" */
.card {
  padding-top: $spacing + px;
}

/* Abordagem mais segura — defina a variável com o valor completo */
.card {
  padding-top: $spacing;  /* onde $spacing: 16px; */
}

Qualquer valor de comprimento CSS válido funcionará para padding-top, incluindo px, em, rem, %, vw, vh, ch, e outros — desde que um número preceda a unidade. O único valor de comprimento que não requer unidade é 0.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.