Codestin Search App

Description

The line-height property controls the amount of vertical space that each line of inline content occupies - essentially the distance between baselines in a block of text. It sets the minimum height used when forming line boxes, so it directly influences how tightly or loosely lines of text stack. In typography terms this is often called the “leading,” and adjusting it changes perceived density, legibility, and the overall rhythm of text on a page.

Because line height is applied to the inline formatting context, it interacts closely with the element’s font metrics: the font’s ascender, descender and internal leading determine how that vertical space is distributed around glyphs. That means changes to the element’s font-size will affect how a given line height feels visually, and designers often tune both together to achieve a consistent baseline grid and comfortable reading measure.

In layout terms, line-height affects more than just multi-line paragraphs. It determines the height of line boxes created for inline content, so it can change the computed height of containing elements, influence vertical alignment of adjacent inline or replaced elements, and affect how neighboring elements flow. This is why controlling line height is important when you want predictable vertical centering or when mixing inline-level elements with different typographic sizes - it works in concert with properties such as vertical-align and display to define how inline content aligns and stacks.

Practically, thoughtful use of line-height improves readability, supports a consistent vertical rhythm across components, and can reduce layout surprises when text scales or when different fonts are used. Because it can be inherited, setting a sensible base value at a container level helps maintain visual consistency across a page, while local overrides let you fine-tune headings, captions, and UI controls for balance and clarity.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: For <length> and <percentage> the absolute value; otherwise as specified
Animatable: Yes
JavaScript syntax: object.style.lineHeight

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

line-height: normal | <number> | <length> | <percentage> | none

Values

normalDepends on the user agent. Desktop browsers use a default value of roughly 1.2, depending on the element's font-family.
<length>The box height is set to this length. Negative values are illegal. The length is the computed value.
<number>The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited.
<percentage>The computed value of the property is the percentage multiplied by the element's computed font size. Negative values are illegal.
inherit

Example

HTML

<div class='container'>

    <h1>CSS line-height examples</h1>



    <section class='example example-normal'>

        <h2>line-height: normal;</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>

    </section>



    <section class='example example-1-2'>

        <h2>line-height: 1.2;</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>

    </section>



    <section class='example example-2'>

        <h2>line-height: 2;</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>

    </section>



    <section class='example example-percent'>

        <h2>line-height: 75%;</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>

    </section>

</div>

CSS

.container {
    max-width: 800px;
    margin: 40px auto;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #111;
}

.example {
    border: 1px solid #e0e0e0;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 6px;
    background: #fafafa;
}

.example h2 {
    margin: 0 0 8px 0;
    font-size: 16px;
}

.example p {
    margin: 0;
    font-size: 16px;
}

.example-normal p { line-height: normal; }
.example-1-2 p { line-height: 1.2; }
.example-2 p { line-height: 2; }
.example-percent p { line-height: 75%; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS line-height property. Hover over a browser icon to see the version that first introduced support for this CSS property.