In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > lineHeight

lineHeight style property

Browser support:

Specifies or returns the distance between lines of text in a block-level element.

Syntax:

object.lineHeight;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: line-height

Possible values:

The type of this property is string.

One of the following values:

height (non-negative floating-point)

A floating point number, the height of the line is the specified number multiplied by the font size of the element.

height in non-negative length

The height of the line in length units. For the supported length units, see the length page.

height in non-negative percentage

The height of the line is the specified percentage of the font size of the element.

inherit

Takes the value of this property from the computed style of the parent element.

normal

Default. Normal height is used.

Default: normal.

Example HTML code 1:

This example illustrates the use of the line-height property:

<head>
    <style>
        .example1 {
            border: 1px solid blue;
            font-size: 14px;
            line-height: 14px;
        }
        .example2 {
            border: 1px solid blue;
            font-size: 14px;
            line-height: 20px;
        }
        .example3 {
            border: 1px solid blue;
            font-size: 14px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="example1">
        Sample multiline text <br />with 14px line-height, font-size is 14px
    </div>
    <br  />
    <div class="example2">
        Sample multiline text <br />with 20px line-height, font-size is 14px
    </div>
    <br  />
    <div class="example3">
        Sample multiline text <br />with 30px line-height, font-size is 14px
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the line-height property, all of the three div elements have the same line height (24px, 120% of 20px, 1.2 * 20px):

<head>
    <style>
        .example1 {
            border: 1px solid blue;
            font-size: 20px;
            line-height: 24px;
        }
        .example2 {
            border: 1px solid blue;
            font-size: 20px;
            line-height: 120%;
        }
        .example3 {
            border: 1px solid blue;
            font-size: 20px;
            line-height: 1.2;
        }
    </style>
</head>
<body>
    <div class="example1">
        Sample multiline text <br />with 24px line-height, font-size is 20px
    </div>
    <br  />
    <div class="example2">
        Sample multiline text <br />with 120% line-height, font-size is 20px
    </div>
    <br  />
    <div class="example3">
        Sample multiline text <br />with 12px line-height, font-size is 20px
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the lineHeight property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeLineHeight (selectTag) {            
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var height = selectTag.options[whichSelected].text;

            var anchor = document.getElementById ("myAnchor");
            anchor.style.lineHeight = height;
        }
    </script>
</head>
<body>
    <a id="myAnchor" style="line-height: 1.2em">
        Sample multiline text <br />with the specified line-height
    </a>

    <br />
    <select onchange="ChangeLineHeight (this);" size="10">
        <option />0.2
        <option />0.5
        <option />0.8
        <option />1
        <option selected="selected" />1.2
        <option />1.5
        <option />1.8
        <option />2.1
        <option />2.4
        <option />3
    </select>
</body>