HTML and CSS Reference
In-Depth Information
inches, centimeters, or millimeters, lines of text can overlap each other. Here
are some examples:
#nav li { line-height: 200%; }
#p.intro { line-height: 1.6em; }
#content p { line-height: 1.6em; }
Web authors are cautioned to avoid setting line heights except for simple
text elements such as paragraphs, which are expected to consist of multiple
lines. Relative units such as ems, exes, pixels, and percentages generally work
better with heights than absolute units. he keyword normal is a permissible
value, and it is useful to reset line heights for generated elements. As a general
rule, you should not set the line height for any element unless you also set the
font size for that element or you know what the computed font sizes and units
will be.
Example 3.10 has four paragraphs of text, each set to a diferent line height.
Example 3.10: Setting line heights
<!DOCTYPE html>
<html>
<head>
<title>Example 3.10</title>
<style type="text/css">
p:before { content: attr(style) " "; }
</style>
</head>
<body>
<p style="line-height: normal;"> Lorem ipsum dolor sit amet, ... </p>
<hr/>
<p style="line-height: 100%;"> Lorem ipsum dolor sit amet, ... </p>
<hr/>
<p style="line-height: 1.5em;"> Lorem ipsum dolor sit amet, ... </p>
<hr/>
<p style="line-height: 10px;"> Lorem ipsum dolor sit amet, ... </p>
</body>
</html>
 
Search WWH ::




Custom Search