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>
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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content