Skip to content
Related Articles

Related Articles

CSS | line-height Property

Improve Article
Save Article
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

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: 

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
  • 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: 

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
  • length: In this mode a fixed line height is specified.
line-height: length;
  • Example: 

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
  • percentage: This mode is used to set line height in percent of the current font size.
line-height: percentage;
  • Example: 

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
  • 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
  • Edge 12.0
  • Firefox 1.0
  • Opera 7.0
  • Apple Safari 1.0

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!