CSS | line-height Property

Last Updated : 09 Aug, 2019

The line-height property in CSS is used to set the amount of space used for lines, such as in the text. Negative values are not allowed.

Syntax:

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

Property values:

normal: This mode represents the normal line height. This is the default value.

line-height: normal;

Example:

<!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

number: This value is a unitless number multiplied with 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.

line-height: number;

Example:

<!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

length: In this mode a fixed line height is specified.

line-height: length;

Example:

<!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

percentage: This mode is used to set line height in percent of the current font size.

line-height: percentage;

Example:

<!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

initial: This mode is used to set this property to its default value.
Syntax:
```
line-height: initial;
```

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

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 7.0
Apple Safari 1.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

CSS | line-height Property