Sunday 24th of May 2015 07:00:10 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
<P> Here: a <IMG SRC="tall.gif" CLASS="textup" ALT="tall image"> tall image, and then a <IMG SRC="short.gif" CLASS="textup" ALT="short image"> short image.</P>
Figure 4-36

Figure 4-36. Aligning with the top and text-top of a line

Of course, the exact position of that alignment will depend on what elements are in the line and how tall they are. In the middle

Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

7.4.6. Borders: Known Issues

Of course, there are a few problems with using borders. The mostdistressing is the fact that Navigator 4.x won't draw a borderaround the content area of a block-level element but instead insertssome space between the content and the border. There doesn'tseem to be any way to override this behavior. H1:first-letter {font-size: 200%; line-height: 1px; vertical-align: -100%;}

Consulting Figure 11-16, we see that it looks aboutright!

Figure 11-16

Figure 11-16. The final styled title

The line-height andvertical-align values deserve a small discussion.What's been done is that the inline box of the "S" has beenreduced so that it's only one pixel tall. (We could have usedcentering the element within its parent, as you can see from Figure 8-14:

P {width: 100px; margin-left: auto; margin-right: auto;}
Figure 8-14

Figure 8-14. Setting an explicit width

This is the correct way to center block-level elements, as a matter of fact. text-align is supposed to apply to only the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it. Instead, you should declare: