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>
Output

line-height: normal

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?

line-height: 1.6

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?

line-height: 24px

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?

line-height: 160%

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?

line-height: 3em

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?

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋