Line-height property
The CSS line-height property specifies the height of each line box and thereby controls the vertical spacing of text lines.
CSS in Depth, Second Edition
The line-height property specifies the height of a line box or the distance between lines of text.
- How it is used
- Controls text spacing while helping resolve inherited typography, precise vertical gaps, and overlapping wrapped inline elements.
- How deep it goes
- Explains unitless versus length inheritance with calculations, then works through content-box spacing and padded inline elements.
- Examples
- Compares a doubled-font paragraph under unitless and em values, measures a heading-to-paragraph gap, and fixes wrapping padded tags.
- What you can do after
- Operate/configure it with unitless inherited values and tune margins or inline-tag spacing when rendered gaps do not match expectations.
Read how CSS in Depth, Second Edition explains line-height property →
Math for Web Design
The CSS line-height property specifies the height of a line box or the spacing allocated to each line of text.
- How it is used
- Balances paragraph readability by coordinating vertical spacing with font size and line length.
- How deep it goes
- Explains line-box spacing, percentage computation, inheritance, and CSS formulas for scaling typography.
- Examples
- Works through inherited 150% versus unitless 1.5 values and repairs a cramped article with 1.41 line height.
- What you can do after
- Apply it via CSS custom properties and calc() to scale readable text with font size or maximum width.
Read how Math for Web Design explains line-height property →
Design for Developers
Line height is the vertical distance allocated to each line of text, including the space between successive lines.
- How it is used
- Establishes readable text spacing and the vertical rhythm connecting typography, margins, padding, and page structure.
- How deep it goes
- Explains unitless calculations, baseline alignment, accessibility guidance, and margin adjustments, stopping short of browser rendering internals.
- Examples
- Uses 16px body text, 1.25 and 1.5 values, 20px and 24px results, 12px baselines, and heading type ramps.
- What you can do after
- Apply it by selecting line-height values, calculating pixel results, and tuning margins and padding against a baseline grid.
Read how Design for Developers explains line-height property →
WordPress Power Toolkit: Harness AI to build next-level websites
Line height is the vertical spacing between successive lines of text, typically expressed as a multiple of the font size.
- How it is used
- Refines website typography so body text remains readable and visually connected.
- How deep it goes
- Defines line height, gives common values and visual trade-offs, and defers CSS mechanics to later customization.
- Examples
- Uses dense text, disconnected list-like spacing, and a pet-adoption website typography review as reference cases.
- What you can do after
- Operate/configure it through theme typography controls and evaluate whether text spacing improves readability.
Web Design Playground, Second Edition
The CSS line-height property specifies the height of each line box used to lay out text.
- How it is used
- Improves text readability and adjusts the spacing of wrapped headings.
- How deep it goes
- Defines line boxes and leading, catalogs four value forms, and demonstrates spacing effects with concrete examples.
- Examples
- Demonstrates 0.75, 0.9, 1.4, 1.5, 1.75, and 2.25 values for tight, comfortable, and loose spacing.
- What you can do after
- Apply it via CSS declarations to tune paragraph readability and bring wrapped headings closer together.
Read how Web Design Playground, Second Edition explains line-height property →
Everyday Data Visualization
Line spacing is the vertical distance between successive lines of text.
- How it is used
- Uses line spacing to improve readability, guide eye movement, and support accessible typography.
- How deep it goes
- Defines line spacing and gives accessibility rationale, but does not specify implementation syntax or exact measurements.
- Examples
- Uses paragraph spacing, loose character spacing, shorter line lengths, and user-applied accessibility styling as practical comparisons.
- What you can do after
- Apply it by choosing readable line spacing and preserving content usability under user-controlled accessibility styling.
Read how Everyday Data Visualization explains line-height property →
Build a Website with ChatGPT
The CSS line-height property specifies the height of a line box and the spacing of text lines.
- How it is used
- Improves text readability by adding space between lines in a page’s CSS body rule.
- How deep it goes
- Demonstrates the declaration line-height: 1.5 and adjustment by experimentation, without explaining browser line-box internals.
- Examples
- Uses body-rule examples containing line-height: 1.5 alongside font size, padding, margins, colors, and maximum width.
- What you can do after
- Apply it by adding line-height: 1.5 to a CSS body rule and adjusting the value for comfortable text spacing.
Read how Build a Website with ChatGPT explains line-height property →
Tiny CSS Projects
Line height, also called leading, is the vertical distance allocated to each line of text.
- How it is used
- Improves text readability and controls spacing in paragraphs, quotations, and prominent headings.
- How deep it goes
- Defines leading, compares unitless and unit-based values, and demonstrates paragraph, quote, and heading adjustments.
- Examples
- Uses paragraph rules, a styled blockquote, and a newspaper heading as concrete CSS examples.
- What you can do after
- Apply it via CSS to set readable paragraph spacing and adapt line boxes to individual typefaces.
Related concepts
- typographypart of · Typography is the design and arrangement of written text, including typeface, size, spacing, alignment, and layout, to support readability and visual communication.
- font-size propertyuses · The CSS font-size property specifies the nominal size of an element’s rendered text.
- unitless numberused by · A unitless number is a CSS numeric value written without a measurement unit and interpreted according to the receiving property.
- WCAGconfigured by · WCAG is a W3C standard providing testable recommendations and success criteria for making web content accessible to people with disabilities.
- inline containerconfigures · An inline container is an HTML element that participates in inline layout, flowing with surrounding content and potentially wrapping within its containing block.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.