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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-height-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 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

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

### Incorrect: unrecognized value

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

### Incorrect: malformed `calc()` expression

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

### Correct: single length value

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

### Correct: percentage value

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

### Correct: `calc()` with proper operator

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

### Correct: keyword value

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