CSS Property line-height








This property influences the layout of line boxes. When applied to a block-level element, it defines the minimum distance between baselines within that element, but not the maximum.

Summary

ItemValue
Initial value normal
Inherited Yes.
Version CSS1
JavaScript syntax object.style.lineHeight="2"
Applies to All elements.




CSS Syntax

line-height: number | length | percentage | normal | inherit

Property Values

The property values are listed in the following table.

ValueDescription
auto Default value. The browser does the calculation.
length Set value in px, cm, etc.
% Set the value in percent of the containing element
normal A normal line height. Default
inherit Inherit the line-height property from the parent element




Browser compatibility

line-height Yes Yes Yes Yes Yes

Example

The following code uses different values to set the line height.

p {line-height: 1.5em;} 
h2 {line-height: 200%;} 
ul {line-height: 1.2;} 
pre {line-height: 0.75em;}

<!DOCTYPE HTML>
<html>
<head>
<style>
td {<!--from  w  ww.j a v  a2  s . co m-->
  width: 200px;
  font: 12pt arial;
}

td.number {
  font-size: 12pt;
  line-height: 1.5;
}

</style>
</head>
<body>
<table>
  <tr>
    <td class="number">The text here uses a  number.</td>
  </tr>
</table>
</body>
</html>

Click to view the demo

Example 2

<!DOCTYPE HTML>
<html>
<head>
<style>
#mytext {<!--from  w  w  w .  ja  va 2 s.c om-->
    margin: 5px; padding: 5px;
    border: medium double   black;
    background-color: lightgrey;
    word-spacing:  10px;
    letter-spacing:  2px;
    line-height: 3em;
}
body {
    font-size: 12px;
}

p {
    width: 400px;
}

.one {
    line-height: normal;
}

.two {
    line-height: 18px;
}

.three {
    line-height: 1.5em;
}

.four {
    line-height: 1.9ex;
}

.five {
    line-height: 75%;
}

</style>
</head>
<body>
    <p id="mytext">
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
        This is a test.This is a test.This is a test.This is a test.
    </p>
    <p class="one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p class="two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p class="three">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p class="four">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    <p class="five">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
      erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
    
</body>
</html>

Click to view the demo