# CSS: “padding-left”: “px” is not a “padding-left” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-left-px-is-not-a-padding-left-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
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
1. **Add a numeric value** before the unit: change `px` to something like `10px`, `1em`, or `5%`.
2. **If you want zero padding**, use `0` — no unit is needed (though `0px` is also valid).
3. **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: px;` will produce `padding-left: px;` if `$indent` is empty.
## Examples
### Incorrect: bare unit with no number
```html
Content
```
The value `px` has no numeric component, so it is not a valid length.
### Correct: numeric value before the unit
```html
Content
```
### Correct: zero padding (no unit required)
```html
Content
```
### Incorrect: empty variable producing a bare unit
This is a common source of the bug in templated or dynamically generated HTML:
```html
Content
```
### 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:
```html
Content
```
### Using an external stylesheet
The same rule applies in external or embedded CSS. The incorrect version:
```css
.sidebar {
padding-left: px;
}
```
The corrected version with a proper numeric value:
```css
.sidebar {
padding-left: 20px;
}
```
### Other valid `padding-left` values
Any valid CSS length or percentage works:
```html
Em-based padding
Rem-based padding
Percentage-based padding
```