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 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
<!-- 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.
Ready to validate your sites?
Start your free trial today.