# CSS: “padding-top”: “px” is not a “padding-top” value.

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

The W3C validator reports this error when it encounters `padding-top: px;` — a unit with no numeric component. In CSS, length values are composed of two parts: a number and a unit identifier (e.g., `px`, `em`, `rem`, `%`, `vh`). The unit alone is meaningless without a number to quantify it. This typically happens due to a typo, a preprocessor variable that resolved to an empty value, or accidentally deleting the number during editing.

This matters for several reasons. Browsers will discard the invalid declaration entirely, meaning `padding-top` will fall back to its default or inherited value — which may not be what you intended. This can cause unpredictable layout differences across browsers. Additionally, invalid CSS can interfere with parsing of subsequent declarations in the same rule block, potentially causing other styles to be ignored as well.

To fix this issue:

1. **Add a numeric value** before the unit: change `px` to something like `10px`, `1.5em`, or `20%`.
2. **Use `0` without a unit** if you want zero padding: `padding-top: 0;` is valid and preferred over `padding-top: 0px;`.
3. **Check preprocessor variables** (Sass, Less, etc.) to make sure they resolve to complete values, not just units.
4. **Remove the declaration entirely** if padding-top doesn't need to be set.

## Examples

### Incorrect: unit without a number

```html
<div style="padding-top: px;">Content</div>
```

The value `px` is not a valid `padding-top` value because it lacks a numeric component.

### Correct: number with a unit

```html
<div style="padding-top: 10px;">Content</div>
```

### Correct: zero padding (no unit needed)

```html
<div style="padding-top: 0;">Content</div>
```

### Incorrect in an external stylesheet

```css
.header {
  padding-top: px;
}
```

### Correct in an external stylesheet

```css
.header {
  padding-top: 16px;
}
```

### Common preprocessor pitfall

If you use a CSS preprocessor like Sass, watch out for variables that might be empty or undefined:

```css
/* If $spacing somehow resolves to empty, this produces "padding-top: px;" */
.card {
  padding-top: $spacing + px;
}

/* Safer approach — define the variable with the full value */
.card {
  padding-top: $spacing;  /* where $spacing: 16px; */
}
```

Any valid CSS length value will work for `padding-top`, including `px`, `em`, `rem`, `%`, `vw`, `vh`, `ch`, and others — as long as a number precedes the unit. The only length value that doesn't require a unit is `0`.