Skip to content
Related Articles

Related Articles

HTML | DOM Style lineHeight Property
  • Last Updated : 01 Aug, 2019

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.

    Syntax:

  • To return the line-height.
    object.style.lineHeight
  • To set the line-height.
    object.style.lineHeight = "normal|number|length|%|initial|
    inherit"

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.




<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :