Open In App

What is the purpose of the ‘line-height’ property in CSS ?

Last Updated : 29 Jan, 2024
Like Article

The line-height property in CSS is used to control the height of a line of text within an element. It defines the amount of space above and below inline elements, such as text, to determine the overall height of a line.


p {
line-height: 1.5;

The primary purposes of the line-height property include:

  • Vertical Alignment: Ensures consistent vertical alignment of text within a line, evenly distributing space above and below the baseline.
  • Improving Readability: Adjusts spacing between lines to enhance readability by preventing text from appearing too cramped or tightly spaced.
  • Creating Vertical Rhythm: Establishes a consistent vertical rhythm across a webpage, contributing to a harmonious layout and a more visually pleasing design.
  • Resolving Layout Issues: Helps address layout issues, especially when working with different font sizes and styles, ensuring proper alignment within a layout.
  • Responsive Design: Supports responsive design strategies by allowing adjustments to line height for maintaining readability across various screen sizes.
  • Unit of Measurement: Accepts various units, including unitless numbers, pixels, percentages, and em units, providing flexibility in defining the spacing between lines.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads