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.
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.
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:
<html>
<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>
<style>
p {
font-size: 16px;
line-height: 1.6rem;
}Our code returns: Click the 
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.
Conclusion
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.
