CSS line-height Property

February 10, 2021 12:37 pm IST

You are Here:

CSS line-height Property

CSS line-height property specifies the height of a line box.

Note: Negative values are not allowed.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ line-height: 3; } </style> </head> <body> <p>This is first paragraph</p> <p>This is second paragraph</p> </body> </html>

Run

Syntax

Using CSS

element{ line-height: 3; }

Using Javascript

object.style.lineHeight = 3;

Animatable

Yes, line-height property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS line-height property is normal (1.2 roughly).

Property Value

The following table provides a list of values for CSS line-height property.

Value	Explanation
Number	The used unitless number value is multiplied by the element's own font size.
normal	Browser dependent. A default value of roughly 1.2.
length	Specifies the line-height (px, cm, etc) as an absolute value.
%	Specifies the line-height as a percentage value. Percentage values may produce unexpected results

Using Percentage

Percentage value is not recommended as it may produce unexpected results.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ line-height: 200%; } </style> </head> <body> <p>This is first paragraph</p> <p>This is second paragraph</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS line-height property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <div id="point"> <p>This is first paragraph</p> <p>This is second paragraph</p> </div> <button onclick="myFunction()">Click Me</button> <script> function myFunction(){ x = document.getElementById("point"); x.style.lineHeight = 3; } </script> </body> </html>

Run