HTML Guides for line-height
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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 -->
<pstyle="line-height: norml;">Text with an invalid line-height.</p>
<!-- Invalid unit -->
<pstyle="line-height:1.5x;">Text with an unrecognized unit.</p>
<!-- Malformed number -->
<pstyle="line-height:1..5;">Text with a typo in the number.</p>
<!-- Unsupported keyword -->
<pstyle="line-height: auto;">Auto is not valid for line-height.</p>
<!-- Negative value -->
<pstyle="line-height:-1.5;">Negative values are not allowed.</p>
✅ Correct: valid line-height values
<!-- Keyword -->
<pstyle="line-height: normal;">Browser default line height.</p>
<!-- Unitless number (recommended) -->
<pstyle="line-height:1.5;">1.5 times the font size.</p>
<!-- Length with px -->
<pstyle="line-height:24px;">Fixed 24px line height.</p>
<!-- Length with em -->
<pstyle="line-height:1.5em;">1.5em line height.</p>
<!-- Percentage -->
<pstyle="line-height:150%;">150% of the font size.</p>
Full document example
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Valid line-height Example</title>
</head>
<body>
<h1style="line-height:1.2;">A Heading with Tight Spacing</h1>
<pstyle="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.
Negative values for the CSS line-height property are invalid and browsers reject them.
The line-height property sets the height of each line box, so a negative value has no meaning and violates the CSS specification. Valid values are normal, a unitless multiplier like 1.5, a length like 24px or 1.5em, or a percentage like 150%. A unitless number is usually the best choice, since it scales with the element's font size and avoids the inheritance quirks that fixed lengths can cause.
This error usually appears when line-height is set inline through the style attribute, where the W3C validator catches it during HTML validation. A common cause is a calculation in a template or script that produces a negative number and writes it into the markup.
To fix it, replace the negative value with a positive one, or use normal for the browser's default spacing. Tighter lines are fine as long as the value stays positive, such as line-height: 0.9.
HTML examples
Invalid: negative line-height value
<pstyle="line-height:-0.5em;">
Paragraph text
</p>
Valid: positive value or normal
<!-- Unitless multiplier, scales with font size -->
<pstyle="line-height:1.5;">
Paragraph text
</p>
<!-- Browser default spacing -->
<pstyle="line-height: normal;">
Paragraph text
</p>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries