CSS: “padding”: The types are incompatible.

A math function in the padding value, such as calc(), min(), max() or clamp(), combines values whose types don't match, most often a length and a number with no unit.

padding is a shorthand that takes one to four values, for the top, right, bottom and left sides. Each value is a length like 16px or 1rem, or a percentage, so a math function in any of those positions has to work out to a length or a percentage. The validator checks every position, and 1rem calc(1rem + 2) fails just like calc(1rem + 2) on its own. The message only names padding, so it won't tell you which side has the problem. Check each value in the declaration.

Addition and subtraction inside calc() only work between values of the same type. calc(1rem + 2px) adds two lengths, while calc(1rem + 2) adds a bare number to a length, which CSS can't compute. min(), max() and clamp() apply the same rule to their arguments, so max(16px, 2) and clamp(1rem, 5vw, 3) each mix a length with a number. Multiplying or dividing by a plain number is fine, because the number only scales the other value: calc(2 * 1rem) is valid.

A common source is side padding worked out from a fixed content width, such as calc((100vw - 1200) / 2), with the unit left off the width. Writing 1200px fixes it.

Browsers drop a declaration whose expression has the wrong type. Because padding sets all four sides at once, a mistake in one value throws away the other three as well. The element keeps the padding from earlier rules, or the initial 0.

The validator doesn't catch every case. It lets calc(5% + 2) and max(5%, 2) through, although browsers reject both. It also accepts calc(1rem + 0), but inside a math function a bare 0 counts as a number, so browsers drop that one too. Expressions that use var() pass whatever the variable holds.

Invalid example

<style>
  .section {
    padding: calc(1rem + 2) 1rem;
  }

  .card {
    padding: 1rem 1.5rem max(16px, 2);
  }
</style>

Valid example

<style>
  .section {
    padding: calc(1rem + 2px) 1rem;
  }

  .card {
    padding: 1rem 1.5rem max(16px, 2vw);
  }
</style>

Learn more:

MDN Reference

MDN - padding

→

MDN Reference

MDN - calc()

→