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. User Avatar
    Alan James

    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?

    • User Avatar
      Permalink to comment#

      `CSS offers one other measurement method specific to line height, which is simply
      a number. You write it like this:

      line-height: 1.5;

      There’s no unit (like em or px) after this value. The browser multiplies this number by the font size to determine the line height. So if the text is 1em and the line-height value is 1.5, then the calculated line height is 1.5em. In most cases, the effect is no different from specifying a value of 1.5em or 150%. But sometimes this multiplication factor comes in handy, especially since nested tags inherit the line-height value of their parents.

      For example, say you set the line-height property of the tag to 150%. All tags inside the page would inherit that value. However, it’s not the percentage that’s inherited; it’s the calculated line height. So, say the font size for the page is set to 10 pixels; 150 percent of 10 is 15 pixels. Every tag would inherit a line height of 15 pixels, not 150 percent. So if you happened to have a paragraph with large, 36 pixel text, then its line height—15 pixels—would be much smaller than the text, making the lines squish together in a hard-to-read mess.

      In this example, instead of using a line-height of 150% applied to the tag, you could have all tags share the same basic proportional line height by setting the line-height to 1.5. Every tag, instead of inheriting a precise pixel value for line height from the body style, simply multiplies its font size by 1.5. So in the above example of a paragraph with 36-pixel text, the line height would be 1.5 x 36 or 54 pixels.

    • User Avatar
      Permalink to comment#

      So… actually, this unitless value do correspond to a percentage (according to MDN):
      font-size: 10px;
      line-height: 1.2; /* 12px /
      line-height: 1.2em; /
      12px /
      line-height: 120%; /
      12px */
      It’s all the same.
      So, in the end, you were right, guy.

  2. User Avatar
    Permalink to comment#

    line-height: none reports as invalid value in chrome

  3. User Avatar
    Kelly Johnson
    Permalink to comment#

    Eric Meyer explained it in his Smashing CSS book, 2011. Some interesting stuff at:

    • User Avatar

      Hi Kelly,

      I would like to know the good site to learn js frameworks and other web technologies which are currently popular and running the business. Could you please help me out as I wish to become a successful web developer. So kindly let me know the best way to start with.

      Waiting for your reply.
      Thank you

  4. User Avatar
    Permalink to comment#

    I don’t know
    How to create a container using inline CSS and how to define width and height of any container in inline CSS

    • User Avatar

      well u can use span tag for container bt as per my knowledege we can not set width and height of inline container bcz inline Element only take space that is bounded by its tags. that why there is div (block level) element for container.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.