CSS Tutorial

CSS Line Height

The line-height property in CSS is used to control the amount of space between lines of text within an element. It is an essential property for improving text readability and overall design aesthetics, especially when dealing with paragraphs, headings, and multi-line text content.

Key Points on CSS Line Height:

The line-height property sets the space between lines of text, influencing the vertical spacing of text within a block-level element.
It can accept various types of values, including normal, length, number, and % values.
Setting a higher line-height increases the space between lines, while a lower value reduces it.
line-height can be set for specific elements such as paragraphs, headings, or lists, improving text alignment and readability.
For multi-line text, line-height affects the height of each line box and may impact the overall height of the element.

Syntax for CSS Line Height:

Syntax Example

/* Line height syntax */
        line-height: normal | number | length | percentage;
        
        /* Example */
        line-height: 1.5;

Examples of CSS Line Height:

The following examples demonstrate the usage of the line-height property:

Code Example: Line Height Normal


            p {
            line-height: normal;
              }

Output

This paragraph uses the default line height. The lines are spaced according to the browser's default value.

Code Example: Line Height Number


            p {
            line-height: 1.8;
              }

Output

This paragraph has a line height of 1.8. The space between lines is increased for better readability.

Code Example: Line Height Length


            p {
            line-height: 30px;
              }

Output

This paragraph has a line height of 30px. The lines are spaced with a fixed height of 30 pixels.

Code Example: Line Height Percentage


            p {
            line-height: 150%;
              }

Output

This paragraph has a line height of 150%. The lines are spaced at 150% of the font size.

Common Line Height Values:

normal: The default line height as defined by the browser. It usually depends on the font and is the most commonly used value.
number: A unitless number (e.g., 1.5) that is multiplied by the element's font size to determine the line height.
length: A fixed value (e.g., 20px, 1em) that defines the line height as a specific length.
percentage: A percentage (e.g., 150%) is relative to the element's font size and adjusts the space accordingly.

Common Line Height Use Cases:

Improved Readability: Adjusting the line height can make text easier to read, especially in paragraphs or long blocks of text.
Vertical Spacing: Line height can be used to create space between text elements for visual clarity.
Text Alignment: When combined with vertical-align, line height can control the positioning of inline elements.

The line-height property is crucial for making text more legible and enhancing the overall layout. By adjusting the line height, you can avoid cramped or overly spaced text and achieve better visual balance.