Definition and Usage

The line-height property sets the line height for text.

This property specifies the height of the line box that forms each line of text and is commonly used to set the spacing between lines.

Two Key Roles

Due to these characteristics, the line-height property serves two primary purposes:

  • Setting the line height for text
  • Specifying the minimum height of an internal line box

Setting the Line Height for Text

The following live demo shows how to set the line height for text using the line-height property.

Demo 1: Setting the Line Height for Text Click the demo button below!

Specifying the Minimum Height of an Internal Line Box

The line-height property does not only set the line height for text.
Even in the absence of text, when the line-height property is applied to a block container element, it specifies the minimum height of the internal line box within that element.

The line box refers to a horizontal, virtual space within a block container element where inline content (e.g., text, images, links, inputs, etc.) is rendered.

Demo 2: HTML 
<div style="background-color: yellowgreen;">
    <input type="text">
</div>
Demo 2: Specifying the Minimum Height of an Internal Line Box Click the demo button below!

However, when applied to a flex or grid container, only the text content specifies the minimum height of the internal line box within that element.

Formal syntax

CSS 
selector {
    line-height: /* value */
}

Formal definition

Formal definition of the line-height property
Initial value normal
Applies to all elements
Inherited yes
Percentages refer to the font size of the element itself
Animatable Applies only to values with length units

Syntax

CSS 
## Syntax

/* Keyword values */
line-height: normal;

/* Number values */
line-height: 1.5; /* Sets the line height to 1.5 times the current font-size */

/* Percentage values */
line-height: 150%; /* Sets the line height to 150% of the current font-size */

/* Length values */
line-height: 28px;
line-height: 2.5em;

/* The font shorthand property */
font: 25px/1.5 arial, sans-serif; /* The line-height is set to 1.5 */

/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

Points to Note

  • The reference for both number and percentage (%) values is the font-size of the current element.
  • Animations are applicable only to values that use length units.

How the line-height Property Works

Simply understanding the line-height property as a tool for adjusting line spacing—the space between lines—is only a partial understanding of its behavior.

Another critical function of the line-height property is defining the height of the line box within a block container.
Note that the property is specifically named "line height." As previously explained, the line box is a horizontal, virtual space within a block container where inline content—such as text, images, or inputs that do not force line breaks—is rendered.

Therefore, beyond just adjusting text spacing, the line-height property also determines the minimum height of the inline content area. Furthermore, when the height is adjusted, the line-height property expands or contracts vertically, centered relative to the inline content.

Let's explore this mechanism in detail through the following four examples.

The line-height Property Adjusts Height Based on the Vertical Center of Inline Content

HTML 
<style>
    p {
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 500%">
    This text has a line-height of 500%.
</p>
<p style="line-height: 100px">
    This text has a line-height of 100px.
</p>
<p style="line-height: 5px">
    This text has a line-height of 5px.
</p>
Rendered Output

As demonstrated in the examples above, the line-height property adjusts height based on the vertical center of the inline content.

Consequently, the line-height property is highly effective for vertically centering text within its container.

The line-height Property Has No Effect Without Inline Content

HTML 
<style>
    p {
        background-color: yellowgreen;
        border: 2px solid red;
    }
</style>
<p style="line-height: 500px">
    <!-- Does not work when there is no inline content -->
</p>
Rendered Output

As demonstrated in the example above, the line-height property has no effect when there is no inline content. This is a logical behavior because the line-height property does not directly set the height of the element itself; instead, it defines the height of the line box within a block container. A line box is not generated if no inline content is present.

The line-height Property Applies Not Only to Text but Also to Other Inline Content

HTML 
<style>
    p {
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="Inline Content">
</p>
Rendered Output

As demonstrated in the example above, the line-height property applies not only to text but also to various types of inline content. While it sets the visual height of a text line, this is essentially a byproduct of the line-height property defining the minimum height of the line box.

However, it behaves differently within flex or grid containers.

HTML 
<style>
    p {
        display: flex;
        background-color: yellowgreen;
    }
</style>
<p style="line-height: 100px">
    <input type="text" placeholder="Inline Content">
</p>
<p style="line-height: 100px">
    Text Content
</p>
Rendered Output

As shown in the code above, the line-height property has no effect on non-text inline content within a flex container. However, it still has an effect on text content.

The line-height Property Adjusts Spacing Between Lines in Vertical Writing Mode

When text is set in a vertical writing mode (e.g., when writing-mode is set to vertical-rl or vertical-lr), the line-height property controls the horizontal spacing between the vertical lines of text.

HTML 
<p class="narrow">
    In vertical writing mode (such as vertical-rl),
    the line-height property determines the distance between vertical lines.
</p>
<p class="wide">
    In vertical writing mode (such as vertical-rl),
    the line-height property determines the distance between vertical lines.
</p>
CSS 
p {
    border: 1px solid;
    padding: 0.6em;
    background-color: yellowgreen;
    height: 200px;
    margin-bottom: 1em;
    
    writing-mode: vertical-rl; /* Sets the text to vertical writing mode */
}
.narrow {
    line-height: 1;
}
.wide {
    line-height: 2;
}
Rendered Output

Browser compatibility

Browser compatibility for the line-height property
Property
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
line-height 1 12 1 1

Specifications

Specification for the line-height property
Specification
line-height CSS Inline Layout Module Level 3
#line-height-property

References

See also