Javascript DOM CSS Style lineHeight Property

Introduction

Set the line height for a <div> element:

document.getElementById("myDiv").style.lineHeight = "3";

View in separate window

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
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. This is some text. This is some text.
</div>//w ww.j av a2  s  . c  o  m
<br>

<button type="button" onclick="myFunction()">Set line height</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.lineHeight = "3";
}
</script>

</body>
</html>

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

Property Values

Value	Description
normal	Normal line height. `default`
number	A number multiplied with the current font size to set the line height
length	Defines the line height in length units
%	Defines the line height in % of the current font size
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The lineHeight property returns a String representing the distance between lines in the text.

Previous Next