# CSS: “px” is not a “width” value

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-px-is-not-a-width-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

In CSS, a length value is composed of two parts: a number and a unit. Writing just `px` provides the unit but omits the number, which makes the declaration invalid. The CSS parser cannot interpret `px` alone as a meaningful measurement, so the property is ignored entirely. This means your intended layout won't be applied, potentially causing elements to render at unexpected sizes across different browsers.

This error commonly arises from typos, copy-paste mistakes, or templating issues where a variable that should output a number resolves to an empty string, leaving behind only the unit suffix. It can also happen when a numeric value is accidentally deleted during editing.

Beyond layout breakdowns, invalid CSS can cause inconsistent rendering across browsers. Some browsers may silently discard the invalid declaration, while others might apply unexpected fallback behavior. Keeping your CSS valid ensures predictable, cross-browser results and makes your stylesheets easier to maintain and debug.

## How to Fix It

1. **Add the missing numeric value** — Pair every unit with a number, e.g., `300px`, `1.5em`, `50%`.
2. **Use `0` without a unit for zero values** — The value `0` is valid on its own and doesn't require a unit.
3. **Use a valid keyword** — Properties like `width` accept keywords such as `auto`, `min-content`, `max-content`, and `fit-content`.
4. **Check dynamic values** — If a preprocessor or template engine generates the value, verify it outputs a complete length (e.g., `${value}px` where `value` is not empty).

## Examples

### Incorrect: unit without a number

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

The declaration `width: px` is invalid because `px` alone is not a recognized CSS value. The browser will discard this rule.

### Incorrect: number without a unit

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

A unitless number (other than `0`) is also invalid for the `width` property. Browsers will ignore this declaration as well.

### Correct: number paired with a unit

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

### Correct: using different valid length units

```html
<style>
  .box-a {
    width: 50%;
  }
  .box-b {
    width: 20em;
  }
  .box-c {
    width: 15rem;
  }
  .box-d {
    width: 80vw;
  }
</style>
```

### Correct: zero value and keywords

```html
<style>
  .collapsed {
    width: 0;
  }
  .flexible {
    width: auto;
  }
  .intrinsic {
    width: fit-content;
  }
</style>
```

The value `0` is the only number that doesn't require a unit in CSS. Keywords like `auto`, `min-content`, `max-content`, and `fit-content` are also valid for `width` and don't use numeric lengths at all.

## Common CSS Length Units

| Unit   | Description                                      |
|--------|--------------------------------------------------|
| `px`   | Pixels (absolute unit)                           |
| `em`   | Relative to the element's font size              |
| `rem`  | Relative to the root element's font size         |
| `%`    | Percentage of the containing block's dimension   |
| `vw`   | 1% of the viewport width                         |
| `vh`   | 1% of the viewport height                        |
| `ch`   | Width of the "0" character in the element's font |

Always double-check that your CSS length values include both a number and a unit. If you're generating styles dynamically, add safeguards to ensure the numeric portion is never empty before the unit is appended.