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