The line-height property is used to specify the height of the line on which text appears. The value of the property indicate the height of a line of text, from which the vertical space that the charters in the text take up is deducted.
The remainder is then split in two, with half added to the top of the line of text and half to the bottom. The line-height property and the values it can be assigned are
|
Value |
Description |
|
normal |
A normal line height. |
|
number |
A number that will be multiplied with the current font size to set the line height |
|
length |
A fixed line height in px, pt, cm, etc. |
|
% |
A line height in percent of the current font size |
The line-height property has the value of ‘normal’ as the default value for all the elements on a web page. Its values are discussed as
Number – It is the best way to give line-height value as shown
.base {
line-height: 2;
}
line-height: 2;
}
In the example each line of text is contained in a line-height of 2 indicating that each line is 2 times the height of the text.
Length and percentage – Both work in the same way like a line-height of 3em is a line-height of 3, as a line-height of 30px on text if the text has a font-size of 10px. But inheritance complicates the usage of percentage for child or nested tags hence use the number value option.
The line height is further illustrated as
