W3docs
en
Log in

CSS line-height Property

Use the line-height CSS property to specify the height of the lines of the text. Definition of the property, values and examples.

The line-height property specifies the height of a line box, controlling the vertical spacing between lines of text. It behaves differently depending on the element type:

  • On block level elements, the line-height property specifies the minimal line-height of line boxes in the element.
  • On non-replaced inline elements, the line-height property specifies the height which is used in the calculation of the line box height.
  • On replaced inline elements such as buttons or other input elements, the line-height property typically does not affect the line box height calculation.
Info

Negative values are valid.

Info

The default line-height is about 110% to 120% for the majority of the browsers.

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

Initial Valuenormal
Applies toAll elements.
InheritedYes.
AnimatableYes. Height of the lines is animatable.
VersionCSS1
DOM Syntaxobject.style.lineHeight = "40px";

Syntax

Syntax of CSS line-height Property

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

Example with normal value:

Example of CSS line-height Property with normal value

<!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>
Try it Yourself »

Result

CSS line-height Property

Example with length value:

Example of CSS line-height Property with px value

<!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>
Try it Yourself »

Example with percentage value:

Example of CSS line-height Property with %(percentage) value

<!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>
Try it Yourself »

Example with multiple values:

Example of CSS line-height Property with cm,px,%(percentage) ,normal and number values

<!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>
Try it Yourself »

Line-height property for different purposes

The line-height property can be used to create interesting visual styles by controlling vertical spacing. For example, you can combine it with a linear-gradient() to give each line of text a different color, or use repeating-linear-gradient() to draw lines between text. Note that line-height only controls the spacing, while the gradient handles the colors.

Values

ValueDescriptionPlay it
normalDefines a normal line height. It is the default value of this property.Play it »
lengthDefines a fixed line height in px, cm, em, etc.Play it »
numberDefines a number which is multiplied with the current font size to set the line height.Play it »
%Defines a line height in percent of current font size.Play it »
calcDefines a line height using a calculation.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parents element.

Note: Using the em unit is widely recommended for scalable line-heights.

Practice

Practice

What does the 'line-height' property in CSS do?