How to Set Line Spacing in CSS

We will introduce a few methods to set the line spacing in CSS.

Use the line-height Property to Set the Line Spacing in CSS

We can use the CSS line-height property to define the spacing between the lines in a paragraph. The property sets the height of a line.

While defining the line height, the space between the lines will grow or shrink accordingly. We can apply the line-height property to text elements, particularly a paragraph.

The property takes different values such as normal, number, length, %, initial, and inherit. We will demonstrate the usage of these various options in the article.

The normal value is the default value for the line-height property. It will set the normal line-height.

We can set the value as a unitless number. The number given will be multiplied by the current font size, and it is used to set the line-height. The number 1.6 is the recommended value for the line-height property.

We can also use the length value, giving the units like pt, px, cm, etc. The value in % specifies the percentage of the current font size to set the line-height.

We can set the default value of the line-height property using the initial value. The inherit value will use the same value of the property from its parent element.

For example, create four div in HTML with the classes normal, number, percentage, and length. Inside the div, write some dummy text.

Then, in CSS, select the div element and set the width property to 400px and the word-wrap property to break-word. Next, select the div individual with the class name and set the line-height property values as normal, 2, 80%, and 10px according to the class names shown in the example below.

We set the div width and the word-wrap property to break-word to force the text into the next line. In this way, we can use the line-height property to set the line spacing in CSS.

Example Code:

<h2>Normal Value</h2>
<div class="normal">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio. </div>

<h2>Number Value </h2>
<div class="number">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Percentage Value</h2>
<div class="percentage">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

<h2>Length Value</h2>
<div class="length">Integer semper, arcu vel bibendum euismod, tellus tortor interdum urna, sed varius libero mi sit amet odio.</div>

div{
 width:400px;
 word-wrap: break-word;
}
div.normal {
 line-height: normal;
}

div.number {
 line-height: 2;
}

div.percentage {
 line-height: 80%;
}

div.length {
 line-height: 10px;
}