Skip to main content
Validação HTML

Apenas "0" pode ser uma "unidade". Deve colocar uma unidade após o seu número

Sobre este problema de CSS

No CSS, a maioria dos valores numéricos representa um comprimento, tempo, ângulo ou outra dimensão, e a unidade diz ao browser como interpretar o número. Escrever padding: 20 é ambíguo — significa 20 pixels, 20 ems ou 20 por cento? Sem uma unidade, o browser não tem forma de determinar a intenção do autor, então trata o valor como inválido e descarta toda a declaração. Isto pode levar a layouts quebrados, espaçamento em falta ou outros problemas visuais que são difíceis de depurar.

A única exceção a esta regra é 0. Zero pixels é o mesmo que zero ems, zero rems ou zero por cento — é sempre nada independentemente da unidade. Por causa disto, a especificação CSS permite que 0 seja escrito sem uma unidade. Na verdade, omitir a unidade em valores zero é considerado uma boa prática para CSS mais limpo e conciso.

Este erro de validação aparece comumente em atributos style inline, que é onde o Validador HTML W3C o encontra. No entanto, a mesma regra aplica-se ao CSS escrito em elementos <style> e folhas de estilo externas.

Causas comuns deste erro incluem:

  • Esquecer acidentalmente de digitar a unidade após um número.
  • Copiar e colar valores de ferramentas de design que não incluem unidades.
  • Confundir CSS com o padrão JavaScript element.style.width = "50" (onde algumas APIs aceitam números sem unidade).
  • Assumir que px é a unidade padrão (não é — não existe unidade padrão no CSS).

Exemplos

Incorreto — unidades em falta em valores numéricos

<div style="margin: 10; padding: 20; width: 300;">
  Conteúdo aqui
</div>

O validador reportará erros para 10, 20 e 300 porque nenhum deles tem unidades.

Correto — unidades especificadas em todos os valores não-zero

<div style="margin: 10px; padding: 20px; width: 300px;">
  Conteúdo aqui
</div>

Correto — zero sem unidade

<div style="margin: 0; padding: 0; border: 0;">
  Não são necessárias unidades para zero
</div>

Correto — misturar valores zero e não-zero

<div style="margin: 0 10px 0 20px;">
  Margens superior e inferior são zero, as laterais têm unidades
</div>

Correto — usar outros tipos de unidade

<p style="font-size: 1.2em; line-height: 1.5em; margin-bottom: 2rem;">
  Texto com unidades relativas
</p>

Note que line-height é um caso especial no CSS — na verdade aceita um número sem unidade (como 1.5) como um valor válido, onde o número atua como um multiplicador do tamanho da fonte do elemento. Isto não é o mesmo que uma unidade em falta; é uma proporção deliberadamente sem unidade definida na especificação. A maioria das outras propriedades não tem este comportamento.

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.