Specifying the Space Between Lines
Description
line-height sets the height of each line.
Its value can be
normal or a number or CSS length value or percent value(%).
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
#mytext {<!-- w ww .jav a 2 s.co m-->
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>