Open In App

CSS line-height Property

Last Updated : 27 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

ValueDescription
normalRepresents the default line-height of the element.
initialSets the line height property to its default value.
numberUnitless numbers are multiplied by the element’s font size to determine line height.
lengthSpecifies a fixed line height using a length unit (e.g., px, em).
percentageSets the line height as a percentage of the element’s font size.

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:



Next Article

Similar Reads