CSS: “X”: Unknown dimension.

In CSS, a “dimension” is a number immediately followed by a unit identifier — for example, 16px, 2em, or 100vh. When the validator encounters a dimension token with a unit it doesn’t recognize, it flags it as an unknown dimension. The "X" in the error message is replaced with the actual unrecognized value, such as 10quux or 5pixels.

This issue commonly arises from:

• Typos in unit names — writing 10pxl instead of 10px, or 2ems instead of 2em.
• Made-up or non-standard units — using units that don’t exist in any CSS specification.
• Missing spaces or operators — accidentally concatenating a number with a keyword, like 100vhmax instead of using max(100vh, ...).
• Using units in the wrong context — some newer or less common units may not yet be recognized by the validator, though all widely supported CSS units should be accepted.

This matters because browsers may silently ignore or misinterpret properties with invalid dimension values, leading to broken layouts. Using valid units ensures consistent rendering across browsers and compliance with CSS standards.

How to Fix

1. Check the CSS value flagged in the error message.
2. Verify the unit is a valid CSS unit (e.g., px, em, rem, %, vw, vh, vmin, vmax, ch, ex, cm, mm, in, pt, pc, s, ms, deg, rad, turn, fr).
3. Fix any typos, remove extra characters, or replace non-standard units with valid ones.
4. If the value is meant to be unitless (like line-height: 1.5), remove the erroneous unit entirely.

Examples

Incorrect: Misspelled unit

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

The unit pxl is not a valid CSS unit. The validator reports an unknown dimension for 10pxl.

Correct: Valid unit

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

Incorrect: Made-up unit

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

Neither pixels nor hv are valid CSS units.

Correct: Standard CSS units

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

Incorrect: Missing space causes concatenation

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

The extra x turns rem into the unknown dimension remx.

Correct: Proper unit

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

Incorrect: Unit where none is needed

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

Correct: Unitless value or valid unit

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

If you’re confident the unit is valid and part of a newer CSS specification (such as container query units like cqi or cqb), the validator may not yet support it. In that case, the warning can be noted but may not indicate an actual problem in modern browsers. However, always double-check for typos first — the most common cause is simply a misspelled unit.

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