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

You are here: Reference > CSS > properties > line-height

line-height property

Browser support:

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

JavaScript page for this property: lineHeight. You can find other example(s) there.

Possible values:

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>