CSS lineheight Property (original) (raw)

CSS line-height Property

Last Updated : 27 May, 2026

The line-height property in CSS is used to specify the height of each line of text within an element. It controls the spacing between lines, helping improve readability and the overall appearance of text content.

Can be set using length values, percentages, or unitless numbers.
Increases or decreases spacing between lines for better text formatting.
Commonly used in paragraphs, articles, and headings to enhance readability and design aesthetics.

**Property values

It Defines how much vertical space is used between lines of text, using default, initial, numeric, length-based, or percentage values to control readability and layout.

Value	Description
normal	Represents the default line-height of the element.
initial	Sets the line height property to its default value.
number	Unitless numbers are multiplied by the element's font size to determine line height.
length	Specifies a fixed line height using a length unit (e.g., px, em).
percentage	Sets the line height as a percentage of the element's font size.

Line-Height: Normal; Property

The line-height: normal; property sets the default line height for text, typically ensuring optimal readability and spacing within the element.

**Example: We are using the line-height: normal; property.

html `

CSS line-height Property

<style>
    .geek {
        line-height: normal;
        background: green;
        color: white;
    }
</style>

GeeksforGeeks

<h2>
    CSS line-height Property
</h2>

<div class="geek">
    A computer science portal for geeks.<br>
    This div has line-height: normal;
</div>

Line-Height: Number; Property

The line-height: number; property sets the line height to a unitless number multiplied by the current font size, influencing text spacing and readability effectively.

**Example: We use the line-height: number; property.

html `

CSS line-height Property

<style>
    .geek {
        line-height: 2.5;
        background: green;
        color: white;
    }
</style>

GeeksforGeeks

<h2>
    CSS line-height Property
</h2>

<div class="geek">
    A computer science portal for geeks.<br>
    This div has line-height: 2.5;
</div>

Line-Height: Length; Property

The line-height: length; property sets the line height using a length value. Length units can be absolute (e.g., px) or relative (e.g., em), allowing text spacing to be controlled either independently or relative to the font size.

**Example: We are using line-height: length property.

html `

CSS line-height Property

<style>
    .geek {
        line-height: 2em;
        background: green;
        color: white;
    }
</style>

GeeksforGeeks

<h2>
    CSS line-height Property
</h2>

<div class="geek">
    A computer science portal for geeks.<br>
    This div has line-height: 2em;
</div>

Line-Height: Percentage; Property

The `line-height: percentage;` property sets the line height as a percentage of the current font size, adjusting text spacing proportionally within the element.

**Example: We are using line-height: percentage property.

html `

CSS line-height Property

<style>
    .geek {
        line-height: 150%;
        background: green;
        color: white;
    }
</style>

GeeksforGeeks

<h2>
    CSS line-height Property
</h2>

<div class="geek">
    A computer science portal for geeks.<br>
    This div has line-height: 150%;
</div>