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:
-
Adicione um valor numérico antes da unidade: mude
pxpara algo como10px,1.5em, ou20%. -
Use
0sem unidade se quiser padding zero:padding-top: 0;é válido e preferível apadding-top: 0px;. - Verifique variáveis de pré-processador (Sass, Less, etc.) para garantir que resolvem para valores completos, não apenas unidades.
- 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.
Saiba mais: