CSS line-height Property

The line-height property in CSS is used to specify the height of each line of text within an element. It controls the spacing between lines, helping improve readability and the overall appearance of text content.

• Can be set using length values, percentages, or unitless numbers.
• Increases or decreases spacing between lines for better text formatting.
• Commonly used in paragraphs, articles, and headings to enhance readability and design aesthetics.

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

Property values

It Defines how much vertical space is used between lines of text, using default, initial, numeric, length-based, or percentage values to control readability and layout.

Line-Height: Normal; Property

The line-height: normal; property sets the default line height for text, typically ensuring optimal readability and spacing within the element.

Example: We are using the line-height: normal; property.

Line-Height: Number; Property

The line-height: number; property sets the line height to a unitless number multiplied by the current font size, influencing text spacing and readability effectively.

Example: We use the line-height: number; property.

Line-Height: Length; Property

The line-height: length; property sets the line height using a length value. Length units can be absolute (e.g., px) or relative (e.g., em), allowing text spacing to be controlled either independently or relative to the font size.

Example: We are using line-height: length property.

Line-Height: Percentage; Property

The `line-height: percentage;` property sets the line height as a percentage of the current font size, adjusting text spacing proportionally within the element.

Example: We are using line-height: percentage property.