CSS line-height Property

The line-height property in CSS is a crucial feature for managing the space used for lines, particularly in text. It’s important to note that negative values are not permitted, ensuring a consistent reading experience.

Syntax:

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

Property values:

normal: This mode represents the normal line height. This is the default value.
initial: This mode is used to set this property to its default value.
number: This value is a unitless number multiplied by the current font-size to set the line height. In most cases, this is the preferred way to set line height and avoid unexpected results due to inheritance.
length: In this mode a fixed line height is specified.
percentage: This mode is used to set line height in percent of the current font size.

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

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

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

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:

Google Chrome 1.0
Edge 12.0
Firefox 1.0
Opera 7.0
Apple Safari 1.0

Article Tags :

CSS

Web Technologies

CSS-Properties