# CSS: “padding”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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

## Valid example

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

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