Open In App

HTML | DOM Style lineHeight Property

Improve
Improve
Like Article
Like
Save
Share
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