Sunday 25th of January 2015 05:14:42 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B>and <SPAN STYLE="vertical-align: top; line-height: 4px;">tall</SPAN>and which is<BR>larger than the surrounding text.</P>

Since the line-height for the "tall"text is less than its font-size, the inline box | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: X

x-height: 3.2.2.1. em and ex units
XML (Extensible Markup Language): 1.2.6. Preparing for the Future
display property and: 2.9.1. Why Does the display Property Exist?
selectors in: 2.1.2. Simple Selectors


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

length and percentage values, though, to get a sort of "best ofboth worlds" effect. Let's say you need to have abackground image that is all the way to the right side of an elementand 10 pixels down from the top, as illustrated in Figure 6-44. As always, the horizontal value comes first:

BODY {background-image: url(bg23.gif);background-repeat: no-repeat;background-position: 100% 10px;}
Figure 6-44

Figure 6-44. Mixing percentages and length values

You cannot, however, mix keywords with other

no

Applies to

all elements

WARNING

<TD CLASS="fun"><A HREF="fun.html">Fun Stuff!</A></TD><TD CLASS="links"><A HREF="links.html">Other Links</A></TD><TD CLASS="write"><A HREF="write.html">Contact Me</A></TD></TR></TABLE>

Then, on each page, we simply write an appropriate style. If thehighlighted link should have a yellow background, then on the"Other Links" page, we would add this to the style sheet,leading to the result depicted in Figure 11-20:

Figure 8-61

Figure 8-61. Assigning the line-height property to inline elements

It's important to keep these sorts of things in mind whenyou're trying to do things like add borders to an inlineelement. Let's say you want to put 5-pixel borders around anyhyperlink:

A:link {border: 5px solid blue;}

If you don't set a large enough line-heightto accommodate the border, it will be in danger of overwriting other