About This HTML Issue
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
normlorNormalinstead ofnormal(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., confusing1.5with1.5 emwith a space). -
Malformed numbers — typos like
1..5or24ppx. -
Using unsupported keywords — values like
auto,thin, orlargeare not valid forline-height. -
Negative values —
line-heightdoes 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
<!-- Misspelled keyword -->
<p style="line-height: norml;">Text with an invalid line-height.</p>
<!-- Invalid unit -->
<p style="line-height: 1.5x;">Text with an unrecognized unit.</p>
<!-- Malformed number -->
<p style="line-height: 1..5;">Text with a typo in the number.</p>
<!-- Unsupported keyword -->
<p style="line-height: auto;">Auto is not valid for line-height.</p>
<!-- Negative value -->
<p style="line-height: -1.5;">Negative values are not allowed.</p>
✅ Correct: valid line-height values
<!-- Keyword -->
<p style="line-height: normal;">Browser default line height.</p>
<!-- Unitless number (recommended) -->
<p style="line-height: 1.5;">1.5 times the font size.</p>
<!-- Length with px -->
<p style="line-height: 24px;">Fixed 24px line height.</p>
<!-- Length with em -->
<p style="line-height: 1.5em;">1.5em line height.</p>
<!-- Percentage -->
<p style="line-height: 150%;">150% of the font size.</p>Full document example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid line-height Example</title>
</head>
<body>
<h1 style="line-height: 1.2;">A Heading with Tight Spacing</h1>
<p style="line-height: 1.6;">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.</p>
</body>
</html>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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.