line-height

The line-height property controls the spacing between text lines. A higher value means the greater space between text and paragraphs.

Initial Value normal
Applies to All elements, including ::first-letter and ::first-line
Inheritance yes
Animation length & number values

The line-height property specifies the height of a line of text. Specifically, it represents the height of the line box in the CSS box model.

For block elements, it is the minimum height of the line box contained in that element, and for non-substituted inline elements, it is the value used to calculate the height of the line box.

This property is primarily used to align line spacing across the page. In most cases, it is written as line-height: 1.7; using a unitless number.

Syntax

/* Keyword value */

line-height: normal;

/* Number value */
line-height: 1.7;
line-height: 3;

/* Length value */

line-height: 12px;
line-height: 1.2em;
line-height: 1rem;

/* Percentage value */

line-height: 15%;
line-height: 80%;

/* Global values */

line-height: inherit;
line-height: initial;
line-height: revert;
line-height: unset;

Description

valuewhat it does
normalDefault value. The browser sets line spacing.
numberA number used as a multiplier of the current font size.
lengthSets a fixed line spacing given in CSS length units – pixels (px), centimeters (cm), points (pt), etc.
%Sets the line spacing as a percentage of the current font size.
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

See the Pen Untitled by Alex Ivanovs (@stackdiary) on CodePen.