The line-height property defines the line-height. There are three situations:
- On block level elements, the line-height property specifies the minimal line-height of line boxes in the element.
- On non-replaced inline elements, the line-height property specifies the height which is used in the calculation of the line box height.
- On replaced inline elements just like buttons or other input elements, the line-height property does not affect.
The line-height property sets the leading of lines of a text. If the line-height value is greater than the font-size value of an element, the difference will be the leading of text.
Initial Value | normal |
Applies to | List items. |
Inherited | Yes. |
Animatable | Yes. Height of the lines is animatable. |
Version | CSS1 |
DOM Syntax | object.style.lineHeight = "40px"; |
Syntax
line-height: normal | number | length | initial | inherit;
Example of the line-height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>
Result
Example of the line-height property with the "length" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br> The line height here is set to 10 pixels.
</div>
</body>
</html>
Example of the line-height property with the "percentage" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br> The line height here is set to 200%.
</div>
</body>
</html>
Example of the line-height property with all the values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>
Line-height property for different purposes
The line-height property can be used for creating different interesting styles. For example, you can use the line-height property to give each line of the text a different color. Here you may use a linear-gradient () with color-stops. Or you can use this property for putting lines between texts with the help of repeating-linear-gradient().
Values
Value | Description | Play it |
---|---|---|
normal | Defines a normal line height. It is the default value of this property. | Play it » |
length | Defines a fixed line height in px, cm etc. | Play it » |
number | Defines a number which is multiplied with the current font size to set the line height. | Play it » |
% | Defines a line height in percent of current font size. | Play it » |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parents element. |
Browser support
1.0+ | 12.0+ | 1.0+ | 1.0+ | 7.0+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.