Verificação HTML: CSS: "X": Dimensão desconhecida.

Sobre este problema de CSS

Em CSS, uma “dimensão” é um número imediatamente seguido por um identificador de unidade — por exemplo, 16px, 2em, ou 100vh. Quando o validador encontra um token de dimensão com uma unidade que não reconhece, marca-o como uma dimensão desconhecida. O "X" na mensagem de erro é substituído pelo valor não reconhecido real, como 10quux ou 5pixels.

Esta questão surge normalmente de:

Erros de digitação em nomes de unidades — escrever 10pxl em vez de 10px, ou 2ems em vez de 2em.
Unidades inventadas ou não-padrão — usar unidades que não existem em nenhuma especificação CSS.
Espaços ou operadores em falta — concatenar acidentalmente um número com uma palavra-chave, como 100vhmax em vez de usar max(100vh, ...).
Usar unidades no contexto errado — algumas unidades mais recentes ou menos comuns podem ainda não ser reconhecidas pelo validador, embora todas as unidades CSS amplamente suportadas devam ser aceites.

Isto é importante porque os browsers podem silenciosamente ignorar ou interpretar mal propriedades com valores de dimensão inválidos, levando a layouts quebrados. Usar unidades válidas garante renderização consistente entre browsers e conformidade com padrões CSS.

Como corrigir

Verifique o valor CSS marcado na mensagem de erro.
Confirme que a unidade é uma unidade CSS válida (por exemplo, px, em, rem, %, vw, vh, vmin, vmax, ch, ex, cm, mm, in, pt, pc, s, ms, deg, rad, turn, fr).
Corrija quaisquer erros de digitação, remova caracteres extra, ou substitua unidades não-padrão por válidas.
Se o valor é suposto ser sem unidade (como line-height: 1.5), remova completamente a unidade errónea.

Exemplos

Incorreto: unidade mal escrita

<div style="margin: 10pxl;">Olá</div>

A unidade pxl não é uma unidade CSS válida. O validador reporta uma dimensão desconhecida para 10pxl.

Correto: unidade válida

<div style="margin: 10px;">Olá</div>

Incorreto: unidade inventada

<style>
  .box {
    width: 50pixels;
    height: 200hv;
  }
</style>

Nem pixels nem hv são unidades CSS válidas.

Correto: unidades CSS padrão

<style>
  .box {
    width: 50px;
    height: 200vh;
  }
</style>

Incorreto: espaço em falta causa concatenação

<style>
  .container {
    font-size: 1remx;
  }
</style>

O x extra transforma rem na dimensão desconhecida remx.

Correto: unidade adequada

<style>
  .container {
    font-size: 1rem;
  }
</style>

Incorreto: unidade onde nenhuma é necessária

<style>
  p {
    line-height: 1.5em2;
  }
</style>

Correto: valor sem unidade ou unidade válida

<style>
  p {
    line-height: 1.5;
  }
</style>

Se tem certeza de que a unidade é válida e faz parte de uma especificação CSS mais recente (como unidades de consulta de contentor como cqi ou cqb), o validador pode ainda não a suportar. Nesse caso, o aviso pode ser notado mas pode não indicar um problema real em browsers modernos. No entanto, verifique sempre primeiro se há erros de digitação — a causa mais comum é simplesmente uma unidade mal escrita.