| Extra space in and around elements on a page can enhance your presentation and help get your message across to the reader. Along with influencing color (Chapter 10, "Colors") and fonts (Chapter 5, "Fonts"), influencing spacing has been high on the wishlists of Web-page designers. Before CSS, there were three ways to control space in HTML: Elements Recall that browsers normally throw away white space characters: newlines, tabs, and extra white spaces (any more than the usual one space between words). However, inside the PRE element, these characters are preserved with their original meanings. By using PRE, designers have used white space characters to achieve, for example, a crude multicolumn layout. Other HTML tags also have been used in unexpected ways. For example, some designers rely on empty P elements or BR elements to increase vertical spacing and on BLOCKQUOTE to indent paragraphs. Often, the results are different in different browsers. Images Recall from Chapter 1, "The Web and HTML," that we talked about the use of images as substitutes for text. Text has often been rendered as an image, because, in this way, every pixel can be controlled. Also, to make minor spacing adjustments, some designers insert transparent images into the text. For example, they indent a paragraph by placing five 1-pixel images at the beginning of each paragraph. However, using images has a downside: They are not scalable from one screen resolution to another, they are not very accessible, and they make the page download slower. Tables The use of tables is the most recent and most "advanced" method for controlling space in HTML. Tables offer layout capabilities beyond CSS1 (although not beyond CSS2). Unlike images, they are scalable from one screen resolution to another. The downside of tables is that the HTML markup is complicated. Tables also take longer to render and are bad for accessibility. We talked about the use of tables also in Chapter 1.
Occasionally, there may still be no other way to realize a certain effect. However, these methods do not offer the depth of functionality for influencing space in your documents that CSS does. By using CSS, you can greatly expand your control of spacing in and around block-level elements and replaced elements. In this chapter, we show you how you control spacing inside a box: between letters, between words, and between lines. In the next chapter, we deal with spacing around the box: margins, padding, and floating boxes. |
