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.

Example Try this code »

<!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.

Recommended :

1 . How float work in CSS ?
2 . How to Insert Images in HTML Pages
3 . How to Add Buttons on WebPage ?
4 . Create Interactive Form using CSS

5 . How to add pagination on Webpage
6 . How to use animation in CSS
7 . BootStrap 4 Photography Snippets
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors