CSS | line-height Property

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

My Personal Notes

Recommended Posts: