# CSS: “margin”: Too many values or values are not recognized.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-margin-too-many-values-or-values-are-not-recognized
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `margin` shorthand property sets the margin area on all four sides of an element. It accepts one to four values, where each value must be a valid CSS length (e.g., `10px`, `1em`, `0`), a percentage, or the keyword `auto`. When the validator reports "Too many values or values are not recognized," it means either more than four values were supplied, or at least one of the values is something CSS doesn't understand — such as a misspelled unit, a missing unit on a non-zero number, or an invalid keyword.

Common causes of this error include:

- **Too many values**: Providing five or more values (e.g., `margin: 1px 2px 3px 4px 5px`). The shorthand accepts a maximum of four.
- **Missing units**: Writing a non-zero number without a unit (e.g., `margin: 10` instead of `margin: 10px`). Only `0` is valid without a unit.
- **Typos or invalid units**: Using a misspelled or nonexistent unit like `margin: 10xp` or `margin: 10pixels`.
- **Invalid keywords**: Using a keyword that isn't recognized in the `margin` context (e.g., `margin: none`). The only non-global keyword `margin` accepts is `auto`.
- **Missing separators or extra characters**: Including commas or other unexpected characters between values (e.g., `margin: 10px, 20px`). Values should be separated by spaces, not commas.

This matters because browsers may ignore or misinterpret an invalid `margin` declaration entirely, leading to broken or inconsistent layouts across different browsers. Writing valid CSS ensures predictable rendering and easier maintenance.

## How `margin` shorthand values work

The number of values you provide determines how they are applied:

- **1 value**: Applied to all four sides. `margin: 10px` → top, right, bottom, and left all get `10px`.
- **2 values**: First is top and bottom, second is left and right. `margin: 10px 20px` → top/bottom `10px`, left/right `20px`.
- **3 values**: First is top, second is left and right, third is bottom. `margin: 10px 20px 30px`.
- **4 values**: Applied clockwise — top, right, bottom, left. `margin: 10px 20px 30px 40px`.

## Examples

### ❌ Too many values

```css
/* Five values — invalid */
.box {
  margin: 10px 20px 30px 40px 50px;
}
```

### ❌ Missing unit on a non-zero number

```css
.box {
  margin: 10 20px;
}
```

### ❌ Invalid keyword

```css
.box {
  margin: none;
}
```

### ❌ Comma-separated values

```css
.box {
  margin: 10px, 20px;
}
```

### ✅ Correct: one to four valid values

```css
/* All four sides */
.box {
  margin: 10px;
}

/* Top/bottom and left/right */
.box {
  margin: 10px 20px;
}

/* Top, left/right, bottom */
.box {
  margin: 10px auto 20px;
}

/* Top, right, bottom, left */
.box {
  margin: 10px 20px 30px 40px;
}
```

### ✅ Correct: using `auto` for centering

```css
.container {
  margin: 0 auto;
}
```

### ✅ Correct: zero without a unit

```css
.box {
  margin: 0;
}
```

### ✅ Correct: using global keywords

```css
.box {
  margin: inherit;
}
```

If you need to set margins on more than four sides independently (which isn't possible — elements only have four sides), you likely have a logic error. If you want fine-grained control, use the individual longhand properties (`margin-top`, `margin-right`, `margin-bottom`, `margin-left`) instead of the shorthand.