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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-min-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 `min-height` property sets the minimum height of an element. Unlike shorthand properties such as `margin` or `padding`, `min-height` accepts only a **single value**. Providing multiple space-separated values (e.g., `min-height: 100px 200px`) is invalid and will trigger this error.

This error commonly occurs for several reasons:

- **Multiple values provided:** `min-height` is not a shorthand and does not accept more than one value.
- **Invalid units or typos:** Using an unrecognized unit (e.g., `100pixels` instead of `100px`) or a misspelled keyword.
- **Using unsupported CSS functions or syntax:** Some newer CSS features like `min-height: fit-content(200px)` may not be recognized by the validator or may lack browser support.
- **Confusing `min-height` with other properties:** Accidentally using syntax meant for properties like `grid-template-rows` or `minmax()` expressions.
- **Missing units on non-zero values:** Writing `min-height: 100` instead of `min-height: 100px`. Zero is the only numeric value that doesn't require a unit.

According to the CSS specification, valid values for `min-height` include:

| Value Type | Examples |
|---|---|
| Length | `0`, `100px`, `10em`, `5rem`, `50vh` |
| Percentage | `50%`, `100%` |
| Keywords | `auto`, `min-content`, `max-content`, `none` |
| Functions | `fit-content`, `calc(100vh - 50px)` |

Fixing this issue ensures your CSS is standards-compliant and behaves predictably across browsers. Invalid `min-height` values will be ignored by browsers, which means your layout may not render as intended.

## Examples

### Incorrect: multiple values

```html
<div style="min-height: 100px 200px;">Content</div>
```

`min-height` only accepts a single value. This is not a shorthand property.

### Incorrect: missing unit

```html
<div style="min-height: 100;">Content</div>
```

Non-zero numeric values must include a unit.

### Incorrect: invalid keyword or typo

```html
<div style="min-height: inheret;">Content</div>
```

The keyword `inherit` is misspelled.

### Correct: single length value

```html
<div style="min-height: 100px;">Content</div>
```

### Correct: percentage value

```html
<div style="min-height: 50%;">Content</div>
```

### Correct: using `calc()` for computed values

```html
<div style="min-height: calc(100vh - 80px);">Content</div>
```

### Correct: using a keyword

```html
<div style="min-height: min-content;">Content</div>
```

### Correct: using `auto`

```html
<div style="min-height: auto;">Content</div>
```

If you need to set both a minimum and maximum height on an element, use `min-height` and `max-height` as separate properties:

```html
<div style="min-height: 100px; max-height: 400px;">Content</div>
```