|
How do I use the line-height property?
Author: Deron Eriksson
Description: This CSS tutorial describes the line-height property.
Tutorial created using:
Windows XP
(Continued from page 1) Several different line-height values are examined below in the style-test.html page. style-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { background-color: aqua; border: 1px solid; width: 10em; margin-bottom: 10px; }
* { font-size: 14px; }
.large { font-size: 24px; }
</style>
</head>
<body>
default (normal)<div>This is some <span class="large">text</span> that we're using to test the line-height property.</div>
line-height: 24px;<div style="line-height: 24px;">This is some <span class="large">text</span> that we're using to test the line-height property.</div>
line-height: 8px;<div style="line-height: 8px;">This is some <span class="large">text</span> that we're using to test the line-height property.</div>
line-height: 1.2<div style="line-height: 1.2">This is some <span class="large">text</span> that we're using to test the line-height property.</div>
line-height: 1.5em<div style="line-height: 1.5em">This is some <span class="large">text</span> that we're using to test the line-height property.</div>
</body>
</html>
The style-test.html page is shown here in IE7. 
Related Tutorials:
|