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

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

<!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

<!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>

Learn more:

MDN Reference

MDN Web Docs: padding

→

MDN Reference

MDN Web Docs: calc()

→