Validación HTML: CSS: “padding-left”: “px” is not a “padding-left” value.

Acerca de este problema de CSS

The padding-left property accepts a valid CSS length value, a percentage, or the keyword 0. A CSS length is always composed of two parts: a number and a unit (e.g., 10px, 2em, 1.5rem). Writing just px with no number is syntactically invalid — it’s a bare unit with no magnitude, so the browser cannot determine what spacing to apply. This commonly occurs due to a typo, a missing variable in a template or preprocessor, or accidentally deleting the numeric portion during editing.

When the validator encounters this in a style attribute, it flags the value as invalid CSS. While most browsers will simply ignore the malformed declaration and fall back to the default padding, relying on this error-recovery behavior leads to unpredictable layouts. Fixing the issue ensures your styles are applied consistently across all browsers and that your markup passes validation.

How to fix it

Add a numeric value before the unit: change px to something like 10px, 1em, or 5%.
If you want zero padding, use 0 — no unit is needed (though 0px is also valid).
Check template variables and preprocessors. If you’re using a system like PHP, JavaScript templating, or a CSS preprocessor (Sass, Less), make sure the variable that should supply the number isn’t empty or undefined. For example, padding-left: <?= $indent ?>px; will produce padding-left: px; if $indent is empty.

Examples

Incorrect: bare unit with no number

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

The value px has no numeric component, so it is not a valid length.

Correct: numeric value before the unit

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

Correct: zero padding (no unit required)

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

Incorrect: empty variable producing a bare unit

This is a common source of the bug in templated or dynamically generated HTML:

<!-- If the variable is empty, this renders as "padding-left: px;" -->

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

Correct: ensuring a fallback value

When generating styles dynamically, always provide a sensible default so the output is valid even if the variable is missing:

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

Using an external stylesheet

The same rule applies in external or embedded CSS. The incorrect version:

.sidebar {
  padding-left: px;
}

The corrected version with a proper numeric value:

.sidebar {
  padding-left: 20px;
}

Other valid `padding-left` values

Any valid CSS length or percentage works:

<div style="padding-left: 2em;">Em-based padding</div>
<div style="padding-left: 1.5rem;">Rem-based padding</div>
<div style="padding-left: 5%;">Percentage-based padding</div>