CSS line-height Property (2024)

❮ Prev Next ❯

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.

Negative values are valid.

The default line-height is about 110% to 120% for the majority of the browsers.

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.

The line-height property has no effect when applying to inline elements: such as images, buttons, etc.

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";

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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().

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.