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

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

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

❌ Missing unit on a non-zero number

.box {
  margin: 10 20px;
}

❌ Invalid keyword

.box {
  margin: none;
}

❌ Comma-separated values

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

✅ Correct: one to four valid values

/* 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

.container {
  margin: 0 auto;
}

✅ Correct: zero without a unit

.box {
  margin: 0;
}

✅ Correct: using global keywords

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

Learn more:

MDN Reference

MDN: CSS margin

→

MDN Reference

CSS values and units | MDN

→