CSS line-height

The CSS line-height property is used to define the height of all lines in specified/selected element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .mydiv{line-height: 210%;}
   </style>
</head>
<body>

   <div class="mydiv">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi? Qui doloremque
         culpa reprehenderit.</p>
   </div>
   
</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur, doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis tempore asperiores quidem autem aspernatur earum commodi? Qui doloremque culpa reprehenderit.

Defining a perfect line-height is important to provide good reading experience to your users.

CSS line-height Syntax

The syntax of line-height property in CSS, is:

line-height: x;

The value of x should be any of the following:

normal - Used to set normal line height. This is the default value
number - Provide a number like 1.6, 2, 1.4 etc. to multiply with the current font-size and set the line-height
length - Use length units like 22px, 160% etc. to provide the custom sized line-height
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS line-height Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{line-height: normal;}
      .b{line-height: 1.6;}
      .c{line-height: 24px;}
      .d{line-height: 160%;}
      .e{line-height: 3em;}
   </style>
</head>
<body>

   <h2>line-height: normal</h2>
   <div class="a">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi?</p>
   </div>

   <h2>line-height: 1.6</h2>
   <div class="b">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi?</p>
   </div>

   <h2>line-height: 24px</h2>
   <div class="c">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi?</p>
   </div>

   <h2>line-height: 160%</h2>
   <div class="d">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi?</p>
   </div>

   <h2>line-height: 3em</h2>
   <div class="e">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum debitis
         iusto dolore temporibus iste aliquam rerum illo quos! Aspernatur,
         doloremque natus. Optio quaerat ratione et rerum, quasi cum blanditiis
         tempore asperiores quidem autem aspernatur earum commodi?</p>
   </div>
   
</body>
</html>