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:
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:
- 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:
- 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:
- 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:
- 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
Please Login to comment...