Wednesday 04th of May 2016 11:05:59 PM

inline elements like hyperlinks, as depicted in Figure 6-24. Of course, if you want to be able to see the tiling pattern, the image will probably need to be pretty small. After all, individual letters aren't that large!

A.grid {background-image: url(smallgrid.gif);}
<P>This paragraph contains <A HREF="..." CLASS="grid">an anchor with a
background image</A> which is tiled only within the anchor.</P>
Figure 6-24

Figure 6-24. A background image on an inline element

border=0 alt="Book Home" >

Cascading Style Sheets: The Definitive GuideSearch this book

Index

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.

so that it's just tall enough to display its own content, andno taller. This happens thanks to the revised rules for calculatingthe height and width of absolutely positioned elements, which werepublished in an errata to the original specification.

Note that the fact that we set an explicit width helped matters.Since the user agent knew how wide the element should be, it was atrivial matter to calculate the height of the element based on itscontent. If width has also been set to auto, thenthe user agent would have had to assign some value to it. This value Thus, if an inline element has a font-size of 15px , then the content-height starts out as 15px .

Second, all of the inline elements in a given line are aligned according to their values for vertical-align. By default, this will cause all text in the line to be aligned along their baselines, but of course different vertical-align values will have different effects. All of the elements could be top-aligned, for example. We'll

P {margin-left: auto; margin-right: auto; width: 50%;}

This will center all paragraphs within their parent elements, asshown in Figure 8-15.

Figure 8-15

Figure 8-15. Centering an element with automatic margins

WARNING

As of this writing, only Internet Explorer 4.5 and 5 for theMacintosh and Opera 3.6 will center elements usingauto margins.