Validación HTML: CSS: "X": Dimensión desconocida.

Acerca de este problema de CSS

En CSS, una “dimensión” es un número inmediatamente seguido por un identificador de unidad — por ejemplo, 16px, 2em, o 100vh. Cuando el validador encuentra un token de dimensión con una unidad que no reconoce, la marca como una dimensión desconocida. La "X" en el mensaje de error se reemplaza con el valor real no reconocido, como 10quux o 5pixels.

Este problema comúnmente surge de:

Errores tipográficos en nombres de unidad — escribir 10pxl en lugar de 10px, o 2ems en lugar de 2em.
Unidades inventadas o no estándar — usar unidades que no existen en ninguna especificación CSS.
Espacios u operadores faltantes — concatenar accidentalmente un número con una palabra clave, como 100vhmax en lugar de usar max(100vh, ...).
Usar unidades en el contexto incorrecto — algunas unidades más nuevas o menos comunes pueden aún no ser reconocidas por el validador, aunque todas las unidades CSS ampliamente soportadas deberían ser aceptadas.

Esto es importante porque los navegadores pueden silenciosamente ignorar o malinterpretar propiedades con valores de dimensión inválidos, llevando a layouts rotos. Usar unidades válidas asegura un renderizado consistente entre navegadores y cumplimiento con los estándares CSS.

Cómo solucionarlo

Revisa el valor CSS marcado en el mensaje de error.
Verifica que la unidad sea una unidad CSS válida (ej., px, em, rem, %, vw, vh, vmin, vmax, ch, ex, cm, mm, in, pt, pc, s, ms, deg, rad, turn, fr).
Corrige cualquier error tipográfico, elimina caracteres extra, o reemplaza unidades no estándar con otras válidas.
Si el valor debe ser sin unidad (como line-height: 1.5), elimina la unidad errónea completamente.

Ejemplos

Incorrecto: Unidad mal escrita

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

La unidad pxl no es una unidad CSS válida. El validador reporta una dimensión desconocida para 10pxl.

Correcto: Unidad válida

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

Incorrecto: Unidad inventada

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

Ni pixels ni hv son unidades CSS válidas.

Correcto: Unidades CSS estándar

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

Incorrecto: Falta de espacio causa concatenación

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

La x extra convierte rem en la dimensión desconocida remx.

Correcto: Unidad apropiada

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

Incorrecto: Unidad donde no se necesita ninguna

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

Correcto: Valor sin unidad o unidad válida

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

Si estás seguro de que la unidad es válida y parte de una especificación CSS más nueva (como unidades de consulta de contenedor como cqi o cqb), el validador puede aún no soportarla. En ese caso, la advertencia se puede anotar pero puede que no indique un problema real en navegadores modernos. Sin embargo, siempre verifica primero errores tipográficos — la causa más común es simplemente una unidad mal escrita.