Line-height

CSS line-height property defines the line-height as we can understand from its name. There are three situations:

  1. On block level elements, CSS line-height property defines the minimal line height of line boxes in the element.
  2. On non-replaced inline elements, CSS line-height property defines the height which is used in the calculation of the line box height.
  3. On replaced inline elements just like buttons or other input element, CSS line-height property has no effect.

By the way, another note is that we cannot give negative values. The default line-height is about 110% to 120% for most browsers.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
          .line-height-small { line-height: 60%;}
          .line-height {line-height: 250%;}
     </style>
   </head>
   <body>

     <p>
       You can see the default line height given by browsers here.<br>
       You can see the default line height given by browsers here.<br>
       You can see the default line height given by browsers here.<br>
     </p>

     <p class="line-height">
       You can see that we used a bigger line height here.<br>
       You can see that we used a bigger line height here.<br>
       You can see that we used a bigger line height here.<br>
    </p>

     <p class="line-height-small">
       You can see that we used a smaller line height here.<br>
       You can see that we used a smaller line height here.<br> 
       You can see that we used a smaller line height here.<br>
     </p>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
normal It defines a normal line height. It is the default value of this property.
length It defines a fixed line height in px, cm etc.
number It defines a number which is multiplied with the current font size to set the line height.
% It defines a line height in percent of current font size.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.