# CSS: “padding-X”: Character Y is neither a decimal digit number, decimal point, nor "e" notation exponential mark.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-x-character-y-is-neither-a-decimal-digit-number-decimal-point-nor-e-notation-exponential-mark
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `calc()` expression in `padding-top`, `padding-right`, `padding-bottom` or `padding-left` has a unit with no number in front of it, such as `px` where `24px` was meant.

Inside `calc()`, the validator expects a number in front of every unit. When it finds a letter where the number should be, it names that letter in the message: `calc(px + 1rem)` reports "Character p", and `calc(rem + 4px)` reports "Character r". Outside `calc()`, a bare `px` gets a different message, which says `px` is not a valid `padding-top` value.

The usual cause is a template or build step that writes a number from a variable into the CSS. If the variable is empty, `calc({{ spacing }}px + 1rem)` comes out as `calc(px + 1rem)`. Browsers discard the whole declaration, so the element keeps the padding it would have without that rule.

To fix it, put the number back in front of the unit, or make sure the variable always has a value. When the value comes from a custom property, give `var()` a fallback, as in `calc(var(--banner-space, 0px) + 1rem)`. If the value can be zero, write `0px` and not `0`: inside `calc()` a unitless `0` is a number, and a number can't be added to a length.

## Invalid example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Banner</title>
  <style>
    .banner {
      padding-top: calc(px + 1rem);
      padding-bottom: calc(px + 1rem);
    }
  </style>
</head>
<body>
  <div class="banner">Welcome</div>
</body>
</html>
```

## Valid example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Banner</title>
  <style>
    .banner {
      padding-top: calc(24px + 1rem);
      padding-bottom: calc(24px + 1rem);
    }
  </style>
</head>
<body>
  <div class="banner">Welcome</div>
</body>
</html>
```