HTML | DOM Style lineHeight Property

The Style lineHeight property is used for setting or returning the distance between lines in a text. It is a string which represents the distance between lines in the text.

To return the line-height.

object.style.lineHeight

To set the line-height.

object.style.lineHeight = "normal|number|length|%|initial|
inherit"

Return Values: It returns a string value that represents the distance between lines in the text

Property Values :

normal : It is used to define the normal height.
number : It is used to define a number that will be multiplied with the current font size to set the line height.
length : It is used to define the line height in length units.
% : It is used to define the line height in % of the current font size.
initial : It is used to set this property to its default value.
inherit : It is used to inherit this property from its parent element.

Below program illustrates the Style lineHeight property :

Example: Setting the line height for a <div> element.

html

<!DOCTYPE html>
<html>

<head>
    <title> Style lineHeight property in HTML</title>
    <style>
        #samplediv {
            border: 1px solid green;
        }
        
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }

    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2> Style lineHeight property </h2>
    <br>

    <div id="MyDiv">
        GeeksforGeeks offers the following courses :
        <ul>
            <li> Fork Python </li>
            <li> Fork CPP </li>
            <li> Fork Java </li>
            <li> Sudo Placement </li>
        </ul>
    </div>
    <br>
    <p>Double click the button</p>
    <button type="button" ondblclick="lineheight()">
    Adjust Line Height
    </button>

    <script>
        function lineheight() {
        
            // Set lineHeight.
            document.getElementById(
            "MyDiv").style.lineHeight = 
            "2";
        }
    </script>

</body>

</html>

Output:

Before clicking the button:

After clicking the button:

Supported Browsers:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 4 and above
Firefox 1 and above
Opera 7 and above
Apple Safari 1 and above

HTML | DOM Style lineHeight Property

Explore