What is the difference between height and line-height?

HTMLWeb DevelopmentFront End Technology

Height is the vertical measurement of the container, for example, height of a div.

Line-height is a CSS property to specify the line height i.e. the distance from the top of the first line of text to the top of the second. It is the space between the lines of two paragraphs.

Example

You can try to run the following code to learn the difference between height and line height:

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .height {
            height: 20px;
         }

         .lheight {
            line-height: 15px;
         }

         .lheightbigger {
            line-height: 35px;
         }
      </style>
   </head>
   <body>
      <h2>Height</h2>
      <div class="height">
         This is demo text. This is demo text.
         This is demo text. This is demo text.
         This is demo text. This is demo text.
      </div>

      <h2>Line Height with less space</h2>
      <div class="lheight">
         This is demo text showing line height example. This is demo text showing line height example.
         This is demo text showing line height example. This is demo text showing line height example.
         This is demo text showing line height example.This is demo text showing line height example.
      </div>

      <h2>Normal Text</h2>
    <div>
      This is normal text.
      This is normal text.
      This is normal text.
    </div>

    <h2>Line Height with more space</h2>
    <div class="lheightbigger">
      This is normal text. This is normal text.This is normal text.
      This is normal text. This is normal text.This is normal text.
      This is normal text. This is normal text.This is normal text.
    </div>
</body>
</html>
raja
Published on 17-Dec-2017 15:32:39
Advertisements