# CSS: “height”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-height-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `height` CSS property defines the height of an element's content area. According to CSS specifications, it accepts several value types: length values (like `px`, `em`, `rem`, `vh`, `cm`), percentages (`%`), and keywords such as `auto`, `min-content`, `max-content`, and `fit-content`. When the validator encounters a value that doesn't belong to any of these accepted types, it reports a type incompatibility error.

This error commonly occurs in a few scenarios:

- **Missing units on numeric values.** In CSS, a bare number like `100` is not a valid length. The only exception is `0`, which doesn't require a unit because zero is the same in any unit system. Writing `height: 100;` instead of `height: 100px;` is invalid CSS.
- **Unrecognized keywords.** Using a word that isn't a valid CSS keyword for `height`, such as `big`, `small`, or `full`, will trigger this error. These are not part of the CSS specification for the `height` property.
- **Values from the wrong property.** Sometimes values valid for other properties get mistakenly used with `height`. For example, `height: bold;` or `height: block;` are type mismatches because those keywords belong to `font-weight` and `display`, respectively.
- **Typos or syntax errors.** A stray character, misspelled unit (e.g., `100xp` instead of `100px`), or malformed `calc()` expression can also cause this error.

While modern browsers often try to recover from invalid CSS by ignoring the offending declaration, this means the `height` rule silently has no effect, which can lead to unexpected layout behavior. Writing valid CSS ensures your styles work predictably across all browsers and avoids hard-to-debug rendering issues.

## How to Fix It

1. **Add a valid unit** to any bare numeric value. Use `px`, `em`, `rem`, `vh`, `%`, or another valid CSS length unit.
2. **Use only recognized keywords** for `height`: `auto`, `min-content`, `max-content`, `fit-content`, or `fit-content(<length>)`.
3. **Check for typos** in both the value and the unit.
4. **Validate `calc()` expressions** to ensure the types inside are compatible (e.g., you can't add a length and a color).

## Examples

### Incorrect: Missing unit on a numeric value

```html
<style>
  .box {
    height: 100; /* invalid — no unit specified */
  }
</style>
```

### Incorrect: Unrecognized keyword

```html
<style>
  .box {
    height: big; /* invalid — "big" is not a CSS keyword for height */
  }
</style>
```

### Incorrect: Misspelled unit

```html
<style>
  .box {
    height: 250xp; /* invalid — "xp" is not a recognized unit */
  }
</style>
```

### Correct: Valid length values, percentages, and keywords

```html
<style>
  .fixed {
    height: 200px;
  }
  .relative {
    height: 70%;
  }
  .viewport {
    height: 100vh;
  }
  .flexible {
    height: auto;
  }
  .zero {
    height: 0;
  }
  .intrinsic {
    height: min-content;
  }
  .calculated {
    height: calc(100vh - 60px);
  }
</style>
```

### Correct: Using `height` in context

```html
<div style="height: 300px;">
  <p style="height: 50%;">
    This paragraph is 150px tall because its parent has a defined height.
  </p>
</div>
```

Keep in mind that percentage-based `height` values only work when the parent element has a defined height. If the parent's height is `auto`, a child with `height: 50%` will behave as if it were set to `auto` as well. When in doubt, use an absolute length like `px` or a viewport unit like `vh`, or set `height: auto` to let the content determine the element's size.