X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS line-height Property

The line-height property defines the line-height. There are three situations:

  • On block level elements, the line-height property defines the minimal line height of line boxes in the element.
  • On non-replaced inline elements, the line-height property defines the height which is used in the calculation of the line box height.
  • On replaced inline elements just like buttons or other input element, the line-height property has no effect.

Negative values are valid.

The default line-height is about 110% to 120% for most browsers.

The line-height property is used to set the leading of lines of a text. If the line-height value is greater than the value of the font-size of an element, the difference will be the leading of text.

The line-height property has no effect when applying to inline elements: such as buttons, images, etc.

Initial Value normal
Applies to List items.
Inherited Yes.
Animatable Yes. Height of the lines is animatable.
Version CSS1
DOM Syntax object.style.lineHeight = "40px";

Syntax

line-height: normal | number | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div{
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: normal (default)</h3>
    <div>This is a paragraph with a standard line-height.<br>
      The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>

In the example below the height of the lines is specified by "px".

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div{
      line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 10px</h3>
    <div>This is a paragraph with a specified line-height. <br>
      The line height here is set to 10 pixels.
    </div>
  </body>
</html>

In the following example the height of the lines is specified by percentages.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h2>line-height: 200%</h2>
    <div>This is a paragraph with a bigger line-height.<br>
      The line height here is set to 200%.
    </div>
  </body>
</html>

An example which includes all the values of this property.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
      line-height: 1;
      }
      div.b {
      line-height: 50px;
      }
      div.c {
      line-height: 0.5cm;
      }
      div.d {
      line-height: 1cm;
      }
      div.e {
      line-height: 200%;
      }
      div.f {
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 1</h3>
    <div class="a">This is a paragraph with a specified line-height.<br>
      The line height here is set to 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">This is a paragraph with a specified line-height.<br>
      The line height here is set to 50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">This is a paragraph with a specified line-height.<br>
      The line height here is set to 0.5 centimeter.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">This is a paragraph with a specified line-height.<br>
      The line height here is set to 1 centimeter.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">This is a paragraph with a bigger line-height.<br>
      The line height here is set to 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">This is a paragraph with a standard line-height.<br>
      The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>

Values

Value Description
normal Defines a normal line height. It is the default value of this property.
length Defines a fixed line height in px, cm etc.
number Defines a number which is multiplied with the current font size to set the line height.
% Defines a line height in percent of current font size.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Browser support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Do you find this helpful?

Related articles