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

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

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

```html
<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

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

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

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

### Incorrect in an external stylesheet

```css
.card {
  padding-bottom: px;
}
```

### Correct in an external stylesheet

```css
.card {
  padding-bottom: 16px;
}
```

### Common preprocessor pitfall

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

```scss
$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:

```scss
$spacing: 16;

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

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

```scss
$spacing: 16px;

.card {
  padding-bottom: $spacing;
}
```