Easy Tutorial
❮ Met Win Createpopup Met Dialog Close ❯

Style lineHeight Property


Definition and Usage

The lineHeight property sets or returns the distance between lines in text.

Syntax

Set lineHeight property:

Return lineHeight property:

Value Description
normal Default. Sets a reasonable line spacing.
number Sets a number, which is multiplied by the current font size to set the line spacing.
length Defines the line spacing using units like px, cm, etc.
% Defines the line spacing as a percentage of the current font size.
inherit The value of the lineHeight property is inherited from the parent element.

Browser Support

All major browsers support the lineHeight property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if the !DOCTYPE is specified. IE9 supports "inherit".


Example

Change the height of the lines:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("div1").style.lineHeight="2";
}
</script>
</head>
<body>

<div id="div1">
This is some text, this is some text. This is some text, this is some text.
This is some text, this is some text. This is some text, this is some text.
This is some text, this is some text. This is some text, this is some text.
This is some text, this is some text. This is some text, this is some text.
</div>
<br>
<button type="button" onclick="displayResult()">Modify Line Height</button>

</body>
</html>

❮ Met Win Createpopup Met Dialog Close ❯