line-height:1.5em; : line height « CSS « HTML / CSS






line-height:1.5em;

  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Leading</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <style type="text/css">
    * {font-family:arial, verdana, sans-serif;}
    h1, h2, h3, h4 {font-family:"gill sans", arial, sans-serif;font-weight:normal;}
  #page {width:400px;}

    body   {font-size:100%;}       /* ensure IE scales correctly */
    p      {font-size:0.75em;}     /* 16 x 0.75  = 12 */ 
    h1     {font-size:1.5em;}      /* 16 x 1.5   = 24 */
    h2     {font-size:1.3em;}      /* 16 x 1.125 = 18 */
    h3     {font-size:1em;}        /* 16 x 1.125 = 18 */  
    h4     {font-size:0.875em;}    /* 16 x 1.143 = 14 */ 

  .adjusted {line-height:1.5em;}

  </style>

</head>

<body>

  <div id="page">
    <h1>Default line-height</h1>
    <p>Here is some sample text</p>
    <p>Here is some sample text</p>
    <p>Here is some sample text</p>
    <p>Here is some sample text</p>
    <p>Here is some sample text</p>
    <p>Here is some sample text</p>                    
    <h1>Increased leading</h1>
    <p class="adjusted">Here is some sample text.</p>
    <p class="adjusted">Here is some sample text.</p>
  </div>

</body>
</html>

   
    
  








Related examples in the same category

1.'line-height' Example
2.line-height: 1.5
3.line-height: 1.4em
4.line-height: 75%
5.line-height: 1.5;
6.line-height: 1.5em;
7.line-height: 75%;
8.line height:3em
9.Setting line heights
10.Line-height settings
11.line-height:normal;line-height:18px;line-height:1.5em;line-height:1.9ex;
12.Interlinear space
13.Examples of font-size and line-height
14.Set line height to 1em
15.Set line height to 1.5
16.line-height: 150%; assigns 150% of the font-size to line-height.
17.Padding sets apart text to emphasize it and line-height
18.Proportional line heights
19.Different line height with various measurements