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

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.

Learn more:

MDN Reference

MDN Web Docs: CSS height

→