CSS Line Height

The CSS line-height property is used to specify the space between two lines. By default, it is at 100%. Values less than 100% will reduce the space between the lines and more than 100% will increase it.


CSS line-height values

Value Description
normal It is the default value which specify normal line height.
Any number Given number would be multiplied with the current font size to set the line height.
length Line height is set in px, pt, cm, etc.
% Line height is specified in percentage.
initial It sets the property to its default value.
inherit The property is inherited from it's parent element.

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Line Height </title>
<meta charset="UTF-8">
<style>
.small {
line-height: 70%;
}
.big {
line-height: 150%;
}
</style>
</head>
<body>
<h4>
This is a heading with a standard line-height.<br>
</h4>
<h4 class="small">
This is a heading with a smaller line-height.<br>
</h4>
<h4 class="big">
This is a heading with a bigger line-height.<br>
</h4>
</body>
</html>

Output

CSS Line Height

This is a heading with a standard line-height.

This is a heading with a smaller line-height.

This is a heading with a bigger line-height.









Follow Us: