CSS Line Height

The CSS line height property is used to define the minimal height of line boxes within the element. It sets the differences between two lines of your content.

It defines the amount of space above and below inline elements. It allows you to set the height of a line of independently from the font size.

CSS line-height values

There are some property values which are used with CSS line-height property.

value	description
normal	This is a default value. it specifies a normal line height.
number	It specifies a number that is multiplied with the current font size to set the line height.
length	It is used to set the line height in px, pt,cm,etc.
%	It specifies the line height in percent of the current font.
initial	It sets this property to its default value.
inherit	It inherits this property from its parent element.

CSS line-height example

<!DOCTYPE html>
<html>
<head>
<style>
h3.small {
    line-height: 70%;
}
h3.big {
    line-height: 200%;
}
</style>
</head>
<body>
<h3>
This is a heading with a standard line-height.<br>
This is a heading with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</h3>
<h3 class="small">
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
</h3>
<h3 class="big">
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
</h3>
</body>
</html>

Test it Now

Next TopicCSS Margin

← prev next →