# CSS: “X”: Unknown dimension.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-unknown-dimension
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

### Incorrect: Made-up unit

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

Neither `pixels` nor `hv` are valid CSS units.

### Correct: Standard CSS units

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

### Incorrect: Missing space causes concatenation

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

The extra `x` turns `rem` into the unknown dimension `remx`.

### Correct: Proper unit

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

### Incorrect: Unit where none is needed

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

### Correct: Unitless value or valid unit

```html
<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.