CSS line-height Property

Last Updated : 27 Aug, 2024

The CSS line height property determines the height of each line of text within an element. It can be set as a specific length, percentage of the font size, or unitless number, affecting spacing between lines for improved readability and aesthetics.

Syntax:

line-height: normal|number|length|percentage|initial|inherit;

Property values:

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.

Table of Content

line-height: normal; property
line-height: number; property
line-height: length property
line-height: percentage property

Here we see example of each Property values:

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: In this example, we are using the line-height: normal; property.

html

<!DOCTYPE html>
<html>

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

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

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

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

</html>

Output: lineheight

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: In this example, we use the line-height: number; property.

html

<!DOCTYPE html>
<html>

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

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

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

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

</html>

Output:

lineheight

line-height: length; property

The line-height: length; property sets a specific fixed line height using a length unit (e.g., pixels, em), adjusting text spacing within the element accordingly.

Example: In this example, we are using line-height: length property.

html

<!DOCTYPE html>
<html>

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

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

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

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

</html>

Output: lineheight

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: In this example, we are using line-height: percentage property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS line-height Property</title>
    <style>
        .geek {
            line-height: 150%;
            background: green;
            color: white;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

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

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

Output: lineheight

Supported Browsers: The browser supported by line-height property are listed below:

CSS direction Property

Vishal Chaudhary 2

Improve

Article Tags :

CSS line-height Property

line-height: normal; property

line-height: number; property

line-height: length; property

line-height: percentage; property

Similar Reads

Thank You!

What kind of Experience do you want to share?