CSS: “px” não é um valor de “width”

Em CSS, um valor de comprimento é composto por duas partes: um número e uma unidade. Escrever apenas px fornece a unidade mas omite o número, o que torna a declaração inválida. O parser CSS não consegue interpretar px sozinho como uma medida significativa, então a propriedade é completamente ignorada. Isso significa que o layout pretendido não será aplicado, potencialmente causando elementos a renderizar em tamanhos inesperados em diferentes navegadores.

Este erro surge comumente de erros de digitação, erros de copiar-colar, ou problemas de template onde uma variável que deveria produzir um número resolve para uma string vazia, deixando apenas o sufixo da unidade. Também pode acontecer quando um valor numérico é acidentalmente eliminado durante a edição.

Além de quebras no layout, CSS inválido pode causar renderização inconsistente entre navegadores. Alguns navegadores podem descartar silenciosamente a declaração inválida, enquanto outros podem aplicar comportamento de fallback inesperado. Manter o seu CSS válido garante resultados previsíveis e cross-browser e torna as suas folhas de estilo mais fáceis de manter e debugar.

Como corrigir

1. Adicione o valor numérico em falta — Combine cada unidade com um número, ex.: 300px, 1.5em, 50%.
2. Use 0 sem uma unidade para valores zero — O valor 0 é válido por si só e não requer uma unidade.
3. Use uma palavra-chave válida — Propriedades como width aceitam palavras-chave como auto, min-content, max-content, e fit-content.
4. Verifique valores dinâmicos — Se um pré-processador ou motor de template gerar o valor, verifique que produz um comprimento completo (ex.: ${value}px onde value não está vazio).

Exemplos

Incorreto: unidade sem um número

<style>
  .box {
    width: px;
  }
</style>
<div class="box">Content</div>

A declaração width: px é inválida porque px sozinho não é um valor CSS reconhecido. O navegador irá descartar esta regra.

Incorreto: número sem uma unidade

<style>
  .box {
    width: 300;
  }
</style>
<div class="box">Content</div>

Um número sem unidade (exceto 0) também é inválido para a propriedade width. Os navegadores irão ignorar esta declaração também.

Correto: número combinado com uma unidade

<style>
  .box {
    width: 300px;
  }
</style>
<div class="box">Content</div>

Correto: usando diferentes unidades de comprimento válidas

<style>
  .box-a {
    width: 50%;
  }
  .box-b {
    width: 20em;
  }
  .box-c {
    width: 15rem;
  }
  .box-d {
    width: 80vw;
  }
</style>

Correto: valor zero e palavras-chave

<style>
  .collapsed {
    width: 0;
  }
  .flexible {
    width: auto;
  }
  .intrinsic {
    width: fit-content;
  }
</style>

O valor 0 é o único número que não requer uma unidade em CSS. Palavras-chave como auto, min-content, max-content, e fit-content também são válidas para width e não usam comprimentos numéricos de todo.

Unidades de comprimento CSS comuns

Sempre verifique duas vezes que os seus valores de comprimento CSS incluem tanto um número quanto uma unidade. Se estiver a gerar estilos dinamicamente, adicione salvaguardas para garantir que a parte numérica nunca está vazia antes de a unidade ser anexada.

Saiba mais:

MDN Reference

MDN: CSS width

→