Style lineHeightProperty
Style Object
Definition and Usage
The lineHeight property sets or returns the distance between lines in text.
Syntax
Set the lineHeight property:
Object.style.lineHeight="normal|number|length|%|inherit"
Return the lineHeight property:
Object.style.lineHeight
| Value | Description |
|---|---|
| normal | Default. Sets a reasonable line spacing. |
| number | Sets a number. This number is multiplied by the current font size to set the line spacing. |
| length | Defines the line spacing using units such as 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 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the height of lines:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</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>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</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>
Try it Yourself »
Style Object Other Extensions