CSS Line Height

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>

Output:

Explanation:

In the above example, we are using the CSS Line height to set different line height for different classes of the HTML <p> element.

Please Share