</style>
</head>
<body>
This is baseline alignment, and here are some p’s with
descenders for reference: ppp <img
src=”rect.jpg”/> so you can see that this image
aligns with the bottom of “so” not “ppp.”
</body>
</html>
Figure 7-11 illustrates superscript alignment.
If you use superscript or subscript, note that the text size does not automati-
cally reduce. If you want that effect, you have to specify a smaller size. To get
the effect you want (shown in Figure 7-12), you should combine the super
value with a percent downsizing of the font-sizeproperty, like this:
span.super {vertical-align: super; font-size: 70%;}
This is 70<span class=”super”>o</span> cold!
You can also specify absolute distances up or down when using vertical align-
ment. Just use any of the usual units of measurement, such as px, inches, and
so on.
Aligning by percentages ...................................................................
Figure 7-13 illustrates how to use negative or positive percentages as a way of
positioning an element relative to its parent:
Figure 7-11:
You can
raise an
ordinary
element or
inline text
element (a
span, for
example)
using the
superscript
value.
140 Part II: Looking Good with CSS
