CSS: “width”: Demasiados valores ou valores não reconhecidos.

A propriedade CSS width define a largura de um elemento e aceita um único valor. O validador W3C reporta este erro quando encontra algo que não consegue analisar como uma declaração width válida. As causas comuns incluem:

• Unidades em falta: Escrever width: 300 em vez de width: 300px. CSS requer unidades explícitas para comprimentos não-zero.
• Múltiplos valores: Escrever width: 100px 200px como se width aceitasse múltiplos valores no estilo abreviado (não aceita).
• Erros tipográficos ou palavras-chave inválidas: Escrever width: auot em vez de width: auto, ou usar uma palavra-chave inventada.
• Funções ou sintaxe inválidas: Usar sintaxe de função incorreta como width: calc(100% - 20px) sem espaços em torno dos operadores, ou usar valores com prefixo de browser sem um fallback padrão.
• Valores não suportados: Usar valores CSS mais recentes como fit-content ou max-content num contexto onde o nível CSS do validador não os reconhece.

Isto é importante porque CSS inválido pode fazer com que os browsers descartem silenciosamente a declaração inteira, significando que o seu layout pretendido não será aplicado. Diferentes browsers podem lidar com valores inválidos de forma diferente, levando a renderização inconsistente. Manter o seu CSS válido garante um comportamento previsível e compatível entre browsers.

Valores válidos para width

A propriedade width aceita exatamente um dos seguintes:

• Valores de comprimento: Um número com uma unidade, como 300px, 25em, 10rem, 5vw.
• Valores de percentagem: Uma percentagem relativa ao bloco contentor, como 75%.
• Valores de palavra-chave: auto, max-content, min-content, fit-content.
• Valores de função: fit-content(20em), calc(100% - 40px), min(300px, 100%), max(200px, 50%), clamp(200px, 50%, 600px).
• Valores globais: inherit, initial, revert, revert-layer, unset.

Note que 0 é o único valor numérico que não requer uma unidade.

Exemplos

Incorreto: unidade em falta

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

Um número simples (exceto 0) não é válido. O browser não saberá se você quer dizer pixels, ems, ou algo mais.

Correto: unidade fornecida

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

Incorreto: demasiados valores

<style>
  .sidebar {
    width: 200px 400px;
  }
</style>
<aside class="sidebar">Sidebar</aside>

Ao contrário de propriedades como margin ou padding, width apenas aceita um único valor.

Correto: valor único

<style>
  .sidebar {
    width: 200px;
  }
</style>
<aside class="sidebar">Sidebar</aside>

Incorreto: erro tipográfico na palavra-chave

<style>
  .container {
    width: auot;
  }
</style>
<div class="container">Content</div>

Correto: palavra-chave adequada

<style>
  .container {
    width: auto;
  }
</style>
<div class="container">Content</div>

Incorreto: expressão calc() malformada

<style>
  .panel {
    width: calc(100%-40px);
  }
</style>
<div class="panel">Content</div>

A função calc() requer espaços em torno dos operadores + e -.

Correto: expressão calc() com espaçamento adequado

<style>
  .panel {
    width: calc(100% - 40px);
  }
</style>
<div class="panel">Content</div>

Incorreto: ponto e vírgula acidental ou texto extra

<style>
  .card {
    width: 50% important;
  }
</style>
<div class="card">Content</div>

Se pretendia usar !important, o ! é obrigatório.

Correto: sintaxe !important adequada

<style>
  .card {
    width: 50% !important;
  }
</style>
<div class="card">Content</div>

Encontre problemas como este automaticamente

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

Iniciar teste gratuito Ver preços