Skip to main content

Explore your training options in 10 minutes

CSS Line Height: A How-To Guide

James Gallagher - December 29, 2020

The CSS line-height property determines the line height of different HTML elements. It is commonly used to set the distance between lines of text. A line height can be set using keywords, percentages, or numerical values.

The CSS line-height property allows developers to define the space between two inline elements on a web page. Developers often use the CSS line-height property to increase or decrease the distance between lines of text on a web page.

This tutorial will discuss how to use the CSS line-height property. We’ll refer to an example to help you get started. By the end of reading this tutorial, you’ll be a master at using the line-height property in your code.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

CSS line-height

The CSS line-height property sets the height of a line box. Line boxes are the lines that make up a box in CSS . This method is often used to set the distance between lines of text.

Aadjusting line height lets you indirectly adjust spacing between lines of text (or other elements) on a web page. This is much like formatting text in Microsoft Word to be double spaced or 1.15 spaced.

The syntax for the CSS line-height property is as follows:

line-height: lineHeight;

“lineHeight” refers to a length value that sets the line height of an element.

Three types of values you can use with the line-height property are length, number, and percentage:

Value Description Example Values Outcome of Example Values
Length Sets line height using a specific unit of measurement (such as em, px, and cm). 10px, 15px, 20px If you specify 10px, your line height will be 10px.
Number Sets line height to be equal to a multiple of the font size. 1, 1.8, 2 If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively.
Percentage Sets line height as a percentage of the font size of the element. 30%, 50%, 110% If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.

Alternatively, you can specify the “normal” keyword. This keyword specifies the use of the browser default. This value is usually around 1.2, depending on what browser the viewer is using.

If you apply the line-height property to a box, all the text within that box will use the line height you have specified.

A Note on Accessibility

Changing line spacing is a common use of the line-height property. This is because you always want to make sure that there is adequate space between lines. If there is not enough space between lines, text may be difficult to read.

Text that is difficult to read has a particularly serious effect on those who have visual impairments. Accessibility should always be a consideration when you are building a website.

When you’re using a number to set the line height of an element in CSS, you should not use any values lower than 1.5. This is because values lower than 1.5 for line height can make it more difficult for visually-impaired readers to use your website.

line-height CSS Example

Suppose we are designing an “About Us” page for a local cooking club’s website. The page contains a heading followed by a paragraph of text outlining a description of the club.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

We want our text to be properly spaced out. So, we decide to set the line height of the paragraph of text on the web page to 1.6rem. We can do so using this code:


<h2>About Us</h2>
<p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p>


p {
	font-size: 16px;
	line-height: 1.6rem;

Our code returns: Click the Image of the "Run Code" Button, a triangle inside a circle button in the code editor above to see the output of our HTML/CSS code.

In our HTML file, we defined an “About Us” header using an <h2> tag. Then, we wrote a description of Fantastic Chefs and enclosed that description within HTML <p> tags .

In our CSS file, we defined one rule. Our rule uses two CSS properties. We set the line height to 1.6rem and the font size to 16px for all <p> HTML tags.

The “rem” unit of measurement we used with the line-height property sets a line height relative to the font-size of the root element. “rem” stands for “root element.” So, because our font size was 16px, our line height for this paragraph of text was 25.6px (16px * 1.6).

The text in the paragraph above is adequately spaced out and does not overlap.

We could also apply our line-height to our <div> element in the above example. This would set the line height for all the text in our <div> tag to the values we specified. This would mean that both our title and our <p> tag would be affected.


The CSS line-height property sets the height of a line box. Usually, this property is used to set the spacing between lines of text in a paragraph or heading. The line-height can be set using the normal keyword, a percentage, a length, or a numerical value.

This tutorial discussed the basics of the CSS line-height property and how you can use it in your code. Now you have the knowledge you need to start using the CSS line-height property like an expert!

Are you looking to become a web developer? Check out our How to Learn CSS guide for expert tips and guidance on the top learning resources and courses.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse,, Afrotech, and others.

Skip to main content