Open In App
Related Articles

CSS line-height Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads