LH and RLH: The CSS Units That Make Vertical Spacing Easy

The lh unit represents the computed line-height of an element. If an element has line-height: 1.5, then 1lh equals that computed value. This creates a direct connection between text and spacing measurements.

Form fields often contain different text sizes (labels, inputs, error messages). LH units automatically adjust spacing based on the text size, keeping visual harmony even when text scales up/down. If a form field has larger text, its spacing will proportionally increase.

Cards can contain varying amounts of text with different sizes (titles, descriptions, metadata). LH units ensure the padding and gaps between elements stay proportional to the text size. This prevents awkward spacing when text wraps or when card content changes dynamically.

Article text often changes size across different screen sizes. LH units maintain proper spacing ratios between headings and paragraphs as the text scales. This is crucial for readability - as text gets larger or smaller, the whitespace adjusts proportionally.

The rlh unit differs by always referencing the root element’s line height. It provides consistency across the entire document, regardless of where it’s used. This makes it particularly valuable for global spacing patterns.

Layouts need consistent spacing throughout a website. RLH units ensure that spacing between components stays uniform because they reference the root line height, not local text sizes.

This prevents the common issue where different text sizes in components create inconsistent gaps and padding.

When you adjust the root line height, all spacings adjust proportionally, maintaining visual consistency.

Navigation elements often mix different text sizes - think of a logo next to nav items. Using RLH keeps spacing consistent regardless of individual text styles.

RLH prevents the navigation from becoming uneven when text sizes vary. The spacing remains anchored to the root line height, creating a stable visual structure.

Vertical rhythm is about creating a consistent spacing pattern that guides the eye down the page. RLH units excel here because they maintain alignment with the root line height.

This means all elements can snap to the same underlying grid, creating a harmonious flow. When text sizes change, the grid remains stable because it’s tied to the root, not individual elements.

When to Choose LH vs RLH

LH units work best for component-level spacing where you want elements to scale with their text size - think form fields, cards, and article content.

RLH units shine for site-wide spacing patterns where consistency is key - layouts, navigation, and vertical rhythm.

By combining both units thoughtfully, you can create flexible, maintainable layouts that stay visually harmonious across different screen sizes and text scales.