CSS: “height”: The types are incompatible.

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

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

Incorrect: Unrecognized keyword

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

Incorrect: Misspelled unit

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

Correct: Valid length values, percentages, and keywords

<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

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

Learn more:

MDN Reference

MDN Web Docs: CSS height

→

MDN Reference

CSS values and units

→

MDN Reference

CSS calc() function

→