# CSS: “line-height”: X is not a “line-height” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-line-height-x-is-not-a-line-height-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `line-height` CSS property controls the spacing between lines of text within an element. When the validator reports that a value "is not a `line-height` value," it means the value you provided doesn't match any of the accepted formats defined in the CSS specification.
Common mistakes that trigger this error include:
- **Misspelled keywords** — writing `norml` or `Normal` instead of `normal` (CSS keywords are case-insensitive in browsers, but some validators may flag inconsistencies; the real issue is outright misspellings).
- **Invalid or missing units** — using a unit the spec doesn't support (e.g., `line-height: 1.5x;`) or accidentally adding a unit to what should be a unitless value (e.g., confusing `1.5` with `1.5 em` with a space).
- **Malformed numbers** — typos like `1..5` or `24ppx`.
- **Using unsupported keywords** — values like `auto`, `thin`, or `large` are not valid for `line-height`.
- **Negative values** — `line-height` does not accept negative numbers.
This matters for standards compliance and predictable rendering. While browsers may silently ignore an invalid `line-height` value and fall back to a default, this means your intended styling won't be applied — potentially causing overlapping text, poor readability, or inconsistent layouts across browsers. Fixing validation errors ensures your styles work as intended everywhere.
### Valid `line-height` values
| Format | Example | Description |
|---|---|---|
| Keyword | `normal` | Browser default (typically around 1.2) |
| Unitless number | `1.5` | Multiplied by the element's font size — **recommended** |
| Length | `24px`, `1.5em`, `2rem` | An absolute or relative length |
| Percentage | `150%` | Relative to the element's font size |
The unitless number format is generally preferred because it scales properly with inherited font sizes, avoiding unexpected results in nested elements.
## Examples
### ❌ Incorrect: invalid values that trigger the error
```html
Text with an invalid line-height.
Text with an unrecognized unit.
Text with a typo in the number.
Auto is not valid for line-height.
Negative values are not allowed.
```
### ✅ Correct: valid `line-height` values
```html
Browser default line height.
1.5 times the font size.
Fixed 24px line height.
1.5em line height.
150% of the font size.
```
### Full document example
```html
Valid line-height Example
A Heading with Tight Spacing
This paragraph uses a unitless line-height of 1.6,
which is a common choice for body text readability. It scales correctly even
if child elements have different font sizes.
```
### Tip: unitless vs. percentage/length
A unitless `line-height` and a percentage `line-height` may look equivalent, but they behave differently with inherited styles. A unitless value is recalculated for each child element based on its own font size, while a percentage or length is computed once on the parent and that fixed value is inherited. For most cases, **unitless numbers are the safest choice**.