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.




Do you find this helpful?

Related articles