# CSS: “padding”: X is an incorrect operator.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-padding-x-is-an-incorrect-operator
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The values of the `padding` property are separated by spaces, not commas: write `padding: 10px 20px`, not `padding: 10px, 20px`.

`padding` is a shorthand that takes one to four lengths or percentages. One value applies to all four sides. Two values set the top and bottom, then the left and right. Three set the top, then left and right, then the bottom. Four go clockwise from the top: top, right, bottom, left.

In CSS a comma separates the items of a list, such as the fonts in `font-family` or the layers in `box-shadow`. `padding` doesn't take a list, so the validator reports the comma as an incorrect operator. Browsers drop the whole declaration, and the element keeps whatever padding an earlier rule gave it, or none. The habit often comes from JavaScript, or from CSS functions like `rgb(255, 0, 0)` where commas separate the arguments.

## Invalid example

```html
<div style="padding: 10px, 20px;">
  <p>Card content</p>
</div>
```

## Valid example

```html
<div style="padding: 10px 20px;">
  <p>Card content</p>
</div>
```