HTML Guides for too many values

The W3C validator checks inline styles and embedded stylesheets for valid CSS. When it encounters a height declaration with multiple values or an unrecognized value, it flags the error because height is not a shorthand property — it only accepts one value at a time. This differs from properties like margin or padding, which accept multiple values to target different sides of an element.

This error commonly occurs when you:

• Accidentally provide two values, perhaps confusing height with a shorthand property (e.g., height: 100px 50px;).
• Include a typo or invalid unit (e.g., height: 100ppx; or height: 100pixels;).
• Use a CSS function incorrectly (e.g., height: calc(100% 20px); — missing the operator).
• Copy a value meant for another property, such as pasting a grid-template-rows value into height.

Browsers may silently ignore invalid height declarations, causing your element to fall back to its default sizing (auto). This can lead to unexpected layout behavior that’s difficult to debug. Keeping your CSS valid ensures consistent rendering across browsers and helps catch mistakes early.

Valid values for height

The height property accepts exactly one of the following:

• Length values: 100px, 10em, 5rem, 20vh, etc.
• Percentage values: 50%, 100%
• Keyword values: auto, max-content, min-content, fit-content(200px)
• Global values: inherit, initial, revert, unset
• Calc expressions: calc(100% - 20px), calc(50vh + 2rem)

Examples

Incorrect: too many values

<style>
  .box {
    height: 100px 50px; /* Error: height only accepts one value */
  }
</style>
<div class="box">Content</div>

Incorrect: unrecognized value

<style>
  .box {
    height: 100pixels; /* Error: "pixels" is not a valid unit */
  }
</style>
<div class="box">Content</div>

Incorrect: malformed calc() expression

<style>
  .box {
    height: calc(100% 20px); /* Error: missing operator between values */
  }
</style>
<div class="box">Content</div>

Correct: single length value

<style>
  .box {
    height: 100px;
  }
</style>
<div class="box">Content</div>

Correct: percentage value

<style>
  .box {
    height: 50%;
  }
</style>
<div class="box">Content</div>

Correct: calc() with proper operator

<style>
  .box {
    height: calc(100% - 20px);
  }
</style>
<div class="box">Content</div>

Correct: keyword value

<style>
  .box {
    height: auto;
  }
</style>
<div class="box">Content</div>

If you need to set both width and height, remember they are separate properties and must be declared individually. If you were trying to set a minimum and maximum height, use min-height and max-height as distinct declarations instead of combining values into a single height property.

Every CSS property has a defined value syntax that specifies exactly which values it accepts and how many. When the validator encounters a declaration that doesn’t match this syntax, it flags the error. This can happen for several distinct reasons:

• Too many values: A property receives more values than its syntax allows. For example, margin accepts one to four values, so a fifth value is invalid. The color property accepts only a single color value, so writing two colors is an error.
• Unrecognized values: A keyword is misspelled (e.g., blocky instead of block) or simply doesn’t exist for that property (e.g., color: bold).
• Newer or non-standard values: A value that belongs to a draft specification, a vendor-prefixed feature, or a browser-specific extension may not be recognized by the validator.
• Missing separators or syntax errors: A missing comma in a multi-value function like rgb() or a missing slash in shorthand like font can cause the parser to misinterpret the values.

This matters because browsers handle invalid CSS unpredictably — they typically discard the entire declaration, which means your intended styles silently disappear. Fixing these errors ensures your styles are applied consistently across browsers and makes your stylesheets easier to maintain and debug.

How to Fix

1. Identify the property and value reported in the error message.
2. Check spelling of every keyword. Common mistakes include inheret (should be inherit), trasparent (should be transparent), and centre (should be center).
3. Count the values and compare against the property’s specification. Consult MDN Web Docs for the accepted value syntax.
4. Verify function syntax — ensure commas, slashes, and parentheses are correct in functions like rgb(), calc(), and clamp().
5. Check for unsupported modern syntax — if you’re using newer CSS features, the validator may not recognize them yet. In that case, verify the syntax is correct per the spec and consider the warning informational.

Examples

Too many values for a property

The color property only accepts a single color value, and margin accepts at most four values:

<!-- ❌ Invalid: too many values -->

<p style="color: red blue;">Hello</p>
<p style="margin: 10px 20px 5px 0px 15px;">Hello</p>

<!-- ✅ Valid: correct number of values -->

<p style="color: red;">Hello</p>
<p style="margin: 10px 20px 5px 0px;">Hello</p>

Unrecognized keyword value

A typo or non-existent keyword triggers the error:

<!-- ❌ Invalid: "blocky" is not a valid display value -->

<div style="display: blocky;">Content</div>

<!-- ✅ Valid: correct keyword -->

<div style="display: block;">Content</div>

Misspelled value in a <style> block

<!-- ❌ Invalid -->

<style>
  .box {
    background-color: trasparent;
    text-align: centre;
  }
</style>

<!-- ✅ Valid -->

<style>
  .box {
    background-color: transparent;
    text-align: center;
  }
</style>

Incorrect function syntax

Missing commas or extra arguments inside CSS functions can also trigger this error:

<!-- ❌ Invalid: missing commas in rgb() -->

<p style="color: rgb(255 0 0 0.5);">Hello</p>

<!-- ✅ Valid: use the correct modern syntax with a slash for alpha -->

<p style="color: rgb(255 0 0 / 0.5);">Hello</p>

Shorthand property confusion

Shorthand properties like font and background have specific value order requirements. Providing values in the wrong order or mixing incompatible values causes errors:

<!-- ❌ Invalid: incorrect font shorthand -->

<style>
  p {
    font: bold Arial 16px;
  }
</style>

<!-- ✅ Valid: size must come before family, weight before size -->

<style>
  p {
    font: bold 16px Arial;
  }
</style>

When in doubt, break shorthand properties into their individual longhand properties (font-weight, font-size, font-family) to isolate which value the validator is rejecting.