To specify the minimal height of the line boxes in order to set the differences between the two lines within an HTML element, the CSS line-height property is used. Space or the height of a line is thus specified above and below an inline element, independently from the font size. The property values used with CSS line-height property are listed below:
| Value | Uses |
| normal | Used to define a normal line height. |
| number | Used to define a number to be multiplied with the font size in order to set the line height. |
| length | Used to define the line height in px, pt,cm, etc. |
| Used to define the line height in percent of the current font. | |
| initial | Used to define this property to its default value. |
| inherit | Used to inherit this property from its parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 80%;
}
p.big {
line-height: 50px;
}
</style>
</head>
<body>
<p>
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
</p>
<p class="small">
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
</p>
<p class="big">
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
Hello World!!<br>
</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS Line height to set different line heights for different classes of the HTML <p> element.