Open In App

HTML | DOM Style lineHeight Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 10 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads