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

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

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

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

Correct: numeric value with unit

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

Correct: zero padding (no unit needed)

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

Correct: using other valid units

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

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

Incorrect in an external stylesheet

.sidebar {
  padding-right: px;
}

Fixed in an external stylesheet

.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:

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

Saiba mais:

MDN Reference

MDN: padding-right

→