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 specifies the vertical space above and below inline elements, enabling you to adjust the line height independently of the font size.
CSS line-height values
There are certain values for properties that are applied in conjunction with the 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
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>