lh unit
The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.lh | 109 | 109 | 120 | 16.4 | 109 | 16.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* lh unit */
/* See MDN Web Docs for details */Use cases
-
Formula-driven sizing
Use lh unit to connect layout values to content, typography, or mathematical relationships.
-
Responsive calculations
Build CSS that scales with the environment rather than relying on repeated hard-coded numbers.
Cautions
- Advanced units and math improve clarity only when the relationship is easy to read later.
- Prefer simpler values when a formula adds more complexity than benefit.
Accessibility
- Relative sizing can improve zoom behavior when tested with real content and component states.
- Math-based CSS should still preserve readable spacing and avoid clipped content.