CSS - line-height Property

The line-height property modifies the height of the inline boxes which make up a line of text.

Possible Values

  • normal − Directs the browser to set the height of lines in the element to a "reasonable" distance.

  • 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 the value given.

  • percentage − The height of lines in the element is calculated as a percentage of the element's font-size.

  • initial − Sets the value of line-height to its default value.

  • inherit − The value of line-height is inherited from its parent value.

Applies to

All the HTML elements.

DOM Syntax

object.style.lineHeight = "15px;"

CSS line-height Example

Following is the example −

<html>
   <head>
      <style>
         div.a {
                line-height: 2in;
                font-size: 10pt;
                background-color: rgb(188, 201, 238);
                margin-bottom: 2px;
               }
         div.b {
                line-height: 100px;
                font-size: 10pt;
                background-color: rgb(230, 235, 185);
                margin-bottom: 2px;
               }
         div.c {
                line-height: 5;
                font-size: 10pt;
                background-color: rgb(231, 174, 218);
                margin-bottom: 5px;
               }
         div.d {
                line-height: normal;
                font-size: 10pt;
                background-color: rgb(205, 149, 141);
                margin-bottom: 2px;
               }
      </style>
   </head>
   <body>
      <div class="a">This div element has a line-height set as 2inches.</div>   
      <div class="b">This div element has a line-height set as 100px.</div>
      <div class="c">This div element has a line-height set as number 5.</div>
      <div class="d">This div element has a line-height set as normal.</div>
   </body>
</html>
Advertisements