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

The padding-bottom property defines the amount of space between an element’s content and its bottom border. Like all CSS length properties, it expects a length value — a number paired with a unit such as px, em, rem, %, vh, etc. The lone string px is just a unit identifier with no magnitude, so CSS parsers cannot interpret it as a meaningful measurement. This typically happens when a numeric value is accidentally deleted during editing, when a CSS preprocessor or template engine outputs an empty variable before the unit, or when code is manually written with a typo.

When the browser encounters an invalid value like padding-bottom: px, it discards the entire declaration and falls back to the default or inherited value. This can lead to unexpected layout shifts, where the spacing looks correct in one browser but breaks in another depending on how defaults are applied. Fixing these errors ensures consistent rendering across browsers and keeps your stylesheets standards-compliant.

How to fix it

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 — writing padding-bottom: 0 is valid and preferred over 0px.
3. Check template variables — if you’re using a preprocessor like Sass or a templating engine, make sure the variable that generates the number is not empty or undefined.
4. Remove the declaration entirely if padding-bottom is not needed, rather than leaving a broken value in place.

Examples

Incorrect: unit without a number

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

The value px alone is not valid because there is no number specifying the amount of padding.

Correct: numeric value with a unit

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

Correct: zero padding (no unit needed)

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

Incorrect in an external stylesheet

.card {
  padding-bottom: px;
}

Correct in an external stylesheet

.card {
  padding-bottom: 16px;
}

Common preprocessor pitfall

In Sass or similar tools, this issue often arises from an empty or undefined variable:

$spacing: null;

.card {
  padding-bottom: #{$spacing}px; // Outputs "padding-bottom: px;" if $spacing is empty
}

The fix is to ensure the variable holds a valid number, or provide a fallback:

$spacing: 16;

.card {
  padding-bottom: #{$spacing}px; // Outputs "padding-bottom: 16px;"
}

Even better, include the unit in the variable itself to avoid concatenation issues:

$spacing: 16px;

.card {
  padding-bottom: $spacing;
}

Learn more:

MDN Reference

MDN: padding-bottom

→