CSS line-height Property with Examples

The line-height property in CSS is one of the most important properties for laying out text. It allows you to control the amount of space between lines of text within an element’s box. It helps to increase the space between lines of text.

Proper line-height can greatly improve the readability of text, especially for longer passages. If you do not explicitly set the line-height property in CSS, the browser will use its default line-height value.

This default value is usually around 1.2 to 1.4 times the font size of the element. However, the exact value can vary slightly between different browsers and operating systems, but it is generally within this range.

Possible Values for line-height Property in CSS


The value of line-height property in CSS can have several different units:

  • Number (unitless): A multiplier of the element’s font size.
  • Length: A specific length value (e.g., px, em, rem).
  • Percentage: A percentage of the element’s font size.
  • Keyword: Normal value (normal).

It is good practice to specify the value of this property in the same measurement in which you specify the size of your text.

Syntax for line-height Property


The general syntax to use line-height property in CSS is as follows:

selector {
    line-height: value;
}

In this syntax, selector specifies the HTML element you want to style.


Example:

p {
  font-size: 18px;
  line-height: 1.6; /* 1.6 times the font size of paragraph */
}

In this example, each line of text in the paragraph will be spaced 1. times the font size of the paragraph.

Units of line-height Property


1. Number (Unitless):

A unitless number acts as a multiplier of the font-size of an element’s box. This method can be used when you want consistency across different font sizes.

Example 2:

p {
  line-height: 1.6;
}

In this example, we have set the line-height with a value 1.6 without a unit. If the font-size is 18px, the line-height will be 18px * 1.6 = 28.8px.

2. Length:

Specifying fixed length value can be useful when you need precise control over the spacing between the lines of text. However, it may not be suitable well for different font sizes or screen resolutions.

Example 3:

p {
  line-height: 24px;
}

3. Percentage:

A percentage value sets the line-height as a percentage of the element’s font size.


Example 4:

p {
  font-size: 18px;
  line-height: 150%; /* Equivalent to 1.5 */
}

In this example, we have set the line-height to 150% for the element <p>. It means that the space between the lines of text within the paragraph is 1.5 times the font size of the paragraph. If you increase the font-size of the paragraph, the line-height will also increase between lines of text.

4. Normal value:

The normal is a keyword in CSS that we can set as a value for the line-height property. It basically represents a browser-defined value, which is usually around 1.2 to 1.4 times the font size of the element. This default value varies slightly between browsers but generally falls within this range.

Example 5:

p {
  font-size: 18px;
  line-height: normal; /* Typically around 1.2 to 1.4 times the font size of the p element.*/
}

Example based on line-height Property with All Possible Values


Let’s take an example in which we will use all the possible values for line-height property in CSS.

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Line-Height Units Example</title>
<style>
body {
    font-family: Arial, sans-serif;
    font-size: 16px; /* Base font size */
}
.without {
    background-color: #fab9ab;
    padding: 10px;
    margin-bottom: 10px;
}
.unitless {
    line-height: 1.5; /* 1.5 times the element font size */
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}
.length {
    line-height: 24px; /* Fixed length */
    background-color: #d0e0f0;
    padding: 10px;
    margin-bottom: 10px;
}
.percentage {
    line-height: 150%; /* 1.5 times the element font size */
    background-color: #e0f0d0;
    padding: 10px;
    margin-bottom: 10px;
}
.keyword {
    line-height: normal; /* Browser default */
    background-color: #f0d0d0;
    padding: 10px;
}
</style>
</head>
<body>
  <div class="container">
     <p class="without">The text in this paragraph does not have a line-height property. In this case, the browser will use its default line-height value. This default is typically around 1.2 to 1.4 times the font size of the element.</p>
     <p class="unitless">The text in this paragraph uses a unitless value for line-height. The line height is 1.5 times the font size of the element.</p>
     <p class="length">The text in this paragraph has a fixed length value for line-height. The line height is set to 24px, which may not scale well with different font sizes.</p>
     <p class="percentage">The text in this paragraph has a percentage value for line-height. The line height is 150%, which is equivalent to 1.5 times the element's font size.</p>
     <p class="keyword">The text in this paragraph has a keyword 'normal' for line-height. The line height is a browser-defined value, typically around 1.2 to 1.4 times the font size.</p>
  </div>
</body>
</html>

Output:

An example of CSS line-height property with different possible values.

As you can see the output in the above figure, the first paragraph does not have a line-height attribute, whereas the second and onwards have paragraphs correspond to different possible values. Adding some extra height between each line of text can often make it more readable, especially in longer passages.

Inheritance of line-height Property


The line-height property is an inheritable nature in CSS, meaning that if you do not explicitly set the line-height property for a child element, it will inherit the line-height from its parent element. This feature is useful for maintaining consistent spacing across nested elements. Let’s take an example based on it.

Example 7:

<!DOCTYPE html>
<html>
<head>
    <title>Inheritable Line-Height Example</title>
<style>
body {
   font-family: Arial, sans-serif;
   font-size: 18px; /* Base font size */
   line-height: 1.5; /* Line-height set on the body */
}
.container {
   width: 60%;
   margin: 0 auto; /* Center the container */
   padding: 20px;
   background-color: #f9f9f9;
}
p {
/* No line-height set here, it will inherit from body */
}
.child {
   font-size: 14px;
/* No line-height set here, it will inherit from body */
}
</style>
</head>
<body>
   <div class="container">
      <p>The text of this paragraph does not have an explicitly set line-height. Therefore, it will inherit the line-height from the body element, which is set to 1.5. This means the line height will be 1.5 times the font size of the paragraph.</p>
      <div class="child">
          <p>The text of this child element also inherits the line-height from the body element. Even though the font size is different, the line-height remains consistent at 1.5 times the font size.</p>
      </div>
   </div>
</body>
</html>

Inheriting the line-height from parent elements makes the consistent line spacing across different sections of the content on the web page. It also reduces the need to specify line-height for each child element, making the CSS code easier to maintain. When you change the line-height of a parent element, all child elements will automatically update.

Best Practice for Specifying line-height Property


Here, we have listed some key points with examples for using line-height property in CSS that you should keep in mind.

1. If you specify a unitless value for line-height property, you can control scalability and consistency across different font sizes of elements. For example:

p {
  font-size: 18px;
  line-height: 1.6; /* Scales with font size */
}

2. You should set a base line-height on the body element for consistent spacing throughout the page. For example:

body {
   font-size: 16px;
   line-height: 1.5;
}

3. You should avoid using fixed lengths for line-height unless absolutely necessary because they may not adapt well to different screen sizes and resolutions.

4. You can use media queries to adjust line-height for different screen sizes. For example:

body {
   font-size: 16px;
   line-height: 1.5;
}
@media (min-width: 768px) {
  body {
     line-height: 1.6;
  }
}
@media (min-width: 1024px) {
  body {
     line-height: 1.7;
  }
}

5. You should not use overly tight line-height. It can cause text lines to overlap, and difficult to read it. For example:

p {
  line-height: 1; /* Too tight */
}

6. You should avoid setting line-height below 1.2 for most text content.

In this tutorial, you have known about CSS line-height property with the help of various examples. I hope that you will have understood this easy topic. Most modern web browsers handle the line-height consistently, but older browser versions may have quirks. Always test your website in multiple web browsers.