In this section, we will learn what the line-height property is and how to use it in CSS.

Click here to run the example of line-height property.

Line Spacing in CSS: CSS line-height Property Definition and Usage

The Space between text lines in a paragraph affects the readability of that text content.

Take a look at the picture below and see which one is more readable!

Clearly, the second paragraph is more readable than the first one because it has set more space between each line.

Now, if you have an HTML document and there’s a paragraph in it and you want to adjust its line height, you can use the CSS `line-height` property.

In CSS, there’s a property called `line-height` by which we can adjust (increase or decrease) the space between each line in a paragraph.

The area that the `line-height` property affects is showed using the red arrow in the picture below:

Basically, the measurement starts from the bottom line of a text line to the bottom line of the vertical neighbor text line.

CSS line-height Property Syntax

line-height: normal|number|length|initial|inherit;

CSS line-height Property Value

The value we set for this property is a number with CSS supported units (relative or absolute).

Example: line-height in CSS

See the Pen line-height in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

CSS Space between Lines

The unit that is suggested to be used when working with this property is “em”, because if you think about, when increasing or decreasing the font size of a paragraph, you would expect an increase or decrease of space between each line of that paragraph as well! So by using this unit we make a relation between the two properties (font-size and line-height) and so their size increase and decreases accordingly.

Example: line spacing in HTML

See the Pen line spacing in HTML by Omid Dehghan (@enjoytutorials1) on CodePen.