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

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