Proportional line heights : line height « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. line height

Proportional line heights

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>A basic example with proportional line heights</title>
<style type="text/css" media="screen">
html {
    font-size: 100%;
}

body {
    padding: 20px;
    font-size: 62.5%;
}

#wrapper {
    margin: 0 auto;
    width: 400px;
}

body {
    line-height: 1.5;
}
  
h1 {
    font-size: 2.5em;
}
    
h2 {
    font-size: 2em;
}
    
h3 {
    font-size: 1.2em;
    margin-top: 1.65em;
}

p {
    font-size: 1.1em;
    margin-bottom: 1.1em;
}
    
h3, p {
    margin-left: 1em;
}
    
    
</style>
</head>
<body>
  <div id="wrapper">
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>

    <h2>Curabitur sit amet risus</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <h3>Praesent rutrum</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
    <h3>Habitant morbid</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</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.line-height:1.5em;
13.Interlinear space
14.Examples of font-size and line-height
15.Set line height to 1em
16.Set line height to 1.5
17.line-height: 150%; assigns 150% of the font-size to line-height.
18.Padding sets apart text to emphasize it and line-height
19.Different line height with various measurements