Grow your CSS skills. Land your dream job.


Last updated on:

The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text.

p {
    line-height: 1.5;

The line-height property can accept the keyword values normal or none as well as a number, length, or percentage.

According to the spec, a value of "normal" is not just a single concrete value that is applied to all elements, but rather computes to a "reasonable" value depending on the font size set (or inherited) on the element.

A length value can be defined using any valid CSS unit (px, em, rem, etc).

A percentage value is the font size of the element multiplied by the percentage. For example:

Check out this Pen!

In the demo above, the three paragraphs have their line heights set to 150%, 200%, and 250%, respectively. The body element has its font size defined at 20px. This means the computed line heights for the paragraphs are 30px, 40px, and 50px, respectively.

Unitless Line Heights

The recommended method for defining line height is using a number value, referred to as a "unitless" line height. A number value can be any number, including a decimal-based number, as is used in the first code example on this page.

Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

IE6/7 will miscalculate the line height on replaced elements (e.g. form controls) that are inline.


  1. Rick Janusz
    Permalink to comment#

    Here is a unitless line-height calculator:

    .css { line-height: calculator }

    Just enter the font size and line height in pixels hit return and voila!

  2. I’ve never understood what unitless line height actually represents. I’ve always thought of it as a percent in decimal form, but I know it’s not.

    1.5 is not the same as 150%.

    What is line height? Percent, pixel value?

    What is the formula for taking a line of a given height and finding it’s new height based on a unitless line height?

  3. Jul
    Permalink to comment#

    line-height: none reports as invalid value in chrome

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".