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

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

The `padding-right` property defines the amount of space between an element's content and its right border. Like all CSS length properties, it expects either a valid length value (a number paired with a unit like `px`, `em`, `rem`, `%`, `vw`, etc.), the keyword `0` (which needs no unit), or the keyword `inherit`/`initial`/`unset`. A bare unit such as `px` with no number is meaningless — it doesn't tell the browser how much padding to apply.

This error typically occurs due to a typo, a templating issue where a variable failed to render, or accidental deletion of the numeric portion of the value. For example, a template like `padding-right: {{ value }}px;` might produce `padding-right: px;` if `value` is empty or undefined.

When the browser encounters an invalid value like `px`, it discards the entire declaration and falls back to the default or inherited value for `padding-right`. This can lead to unexpected layout differences across browsers and makes your intentions unclear to other developers. Fixing these validation errors also helps maintain clean, predictable stylesheets.

## How to Fix

1. **Add the missing number** before the unit: change `px` to a specific value like `10px`.
2. **Use `0` without a unit** if you want no padding: `padding-right: 0;` is valid and preferred over `padding-right: 0px;`.
3. **Check template variables** and dynamic style generation to ensure numeric values are always output correctly.

## Examples

### Incorrect: bare unit with no number

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

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

### Correct: numeric value with unit

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

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

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

### Correct: using other valid units

```html
<div style="padding-right: 2em;">Content</div>
```

```html
<div style="padding-right: 5%;">Content</div>
```

### Incorrect in an external stylesheet

```css
.sidebar {
  padding-right: px;
}
```

### Fixed in an external stylesheet

```css
.sidebar {
  padding-right: 16px;
}
```

### Guarding against empty values in templates

If you generate CSS dynamically, make sure the numeric value is always present. For instance, provide a fallback:

```css
.sidebar {
  padding-right: 16px; /* safe default */
}
```

Rather than relying on a template that might produce an empty value, consider setting defaults in your CSS and only overriding with inline styles when you're certain the value is valid.