CSS - line-height Property

Quiz

CSS line-height property controls the amount of space between lines of text within an element. It affects the vertical distance from the baseline of one line of text to the baseline of the next line.

Syntax

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

Property Values

Value	Description
normal	It directs the browser to set the height of lines in the element to a "reasonable" distance. Default.
number	The actual height of lines in the element is this value multiplied by the font-size of the element.
length	The height of lines in the element is specified in length units (e.g. px, cm, rem etc.)
percentage	The height of lines in the element is calculated as a percentage of the element's font-size.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Line Height Property

The following examples explain the line-height property with different values.

Line Height Property with Normal Value

To set a normal line-height for a piece of text, we can use the normal value. This setting adjusts the line-height to a browser-determined default that ensures optimal readability. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
         line-height: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: normal
   </h4>
   <p>
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

Line Height Property with Numeric Value

To set a larger line-height for a piece of text, we can specify positive numeric values. These values are multiplied with the font-size to produce the line-height. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 1.5;
      }

      #second {
         line-height: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 1.5 (line height is 
      1.5 x font-size (16px))
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 2 (line height is 
      2 x font-size (16px))
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

Line Height Property with Length Values

To set a larger line-height for a piece of text, we can use the length units (e.g. px, em, cm etc.). These measurements are independent of the font-size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 18px;
      }

      #second {
         line-height: 2em;
      }

      #third {
         line-height: 1cm;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 18px
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 2em
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 1cm
   </h4>
   <p id="third">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

Line Height Property with Percentage Values

To set a larger line-height for a piece of text, we can use percentage values (e.g. 10%). These values set the line-height as percentage of the font-size, allowing for scalable adjustments based on the font-size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: 16px;
      }

      #first {
         line-height: 90%;
      }

      #second {
         line-height: 150%;
      }

      #third {
         line-height: 220%;
      }
   </style>
</head>

<body>
   <h2>
      CSS line-height property
   </h2>
   <h4>
      line-height: 90% (line height is 
      90% of font-size)
   </h4>
   <p id="first">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 150% (line height is 
      150% of font-size)
   </h4>
   <p id="second">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
   <h4>
      line-height: 220% (line height is 
      220% of font-size)
   </h4>
   <p id="third">
      TutorialsPoint is a versatile online 
      educational platform that provides a 
      vast array of free tutorials and courses 
      across numerous subjects, such as 
      programming, web development, data science, 
      and more. It caters to learners of all levels, 
      offering detailed explanations, practical 
      examples, and interactive exercises to enhance 
      understanding and skills. Ideal for self-paced 
      learning and skill development.
   </p>
</body>

</html>

Supported Browsers

Property
line-height	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page