Section 6.4. Text Alignment and Spacing | Creating Web Sites: The Missing Manual

6.4. Text Alignment and Spacing

CSS includes a great many properties for controlling how text appears on a Web page. If you've ever wondered how to indent paragraphs, space out lines, or center a title, these are the tools you need.

Table 6-4 has the details on all your alignment options.

Table 6-4. Alignment and Spacing Properties

Property	Description	Common Values	Oldest Supported Browsers	Can Be Inherited
text-align	Lines the text up on one or both edges of the page.	left right center justify	IE 4, Netscape 4	Yes
text-indent	Indents the first line of text (typically in a paragraph).	A pixel value (indicating the amount to indent) or percentage of the width of the containing tag.	IE 4, Netscape 4	Yes
margin	Sets the spacing that's added around the outside of a block element (Section 5.2). You can also use the similar properties margin-bottom, margin-left, margin-right, and margin-top to change the margin on just one side.	A pixel value or percentage indicating the amount of space to add around the element.	IE 4, Netscape 4	No
padding	Sets the spacing that's added around the inside of a block element. Has the same effect as margin, unless you have an element with a border or background color (see Section 6.2.1 for more).	A pixel value or percentage indicating the amount of space to add around the element.	IE 4, Netscape 4	No
word-spacing	Sets the space between words.	A pixel value or percentage.	IE 6, Netscape 6	Yes
letter-spacing	Sets the space between letters .	A pixel value or percentage.	IE 6, Netscape 6	Yes
line-height	Sets the space between lines.	A pixel value or percentage. You can also use a multiple (i.e., use 2 for double-spacing).	IE 4, Netscape 4	Yes

For example, if you want to create a page that has indented paragraphs (like a novel or newspaper), use this style sheet rule:

 p {       text-indent: 20px     }

In the following sections, you'll see examples that use the alignment and margin properties.

6.4.1. Alignment

Ordinarily, all text in a Web page is lined up on the left side of the browser window. Using the text-align property, you can center text, line it up on the right edge, or justify it. Figure 6-9 shows your options.

The most interesting choice is full justification, which tries to line text up so it lines up on both sides. Full justification, which you get by using the justify setting, is common in print (including books like this one). Originally, printers preferred full justification because it helps cram more words into each page (thereby reducing the number of pages and the printing cost). These days, it's a way of life. Many people feel text with full justification looks neater and cleaner than text with a ragged edge, even though tests show plain, unjustified text is easier to read.

Justification doesn't work as well in the Web world as in print. A key problem is the lack of word-splitting rules, which allow long words to be divided in a printed page. The method browsers use to justify text is relatively simplistic. Essentially, the browser adds words one at a time to a line, until no more words can fit, at which point spacing is added between the words to pad it to full length. By comparison, the best page layout systems for print can analyze an entire paragraph as a whole, and find the optimum justification strategy that best satisfies every line. In problematic cases, a skilled typesetter may need to step in and adjust the line breaking manually. Compared to this approach, Web browsers are irredeemably primitive, as you can see in Figure 6-10.

Figure 6-9. This page shows common types of text alignment.

Figure 6-10. If you decide to use full justification in a Web page, make sure your text lines are fairly long. Otherwise, you'll quickly wind up with gaps and rivers of white space. Few Web sites use justification.

6.4.2. Spacing

To adjust the spacing around any element, you use the margin property. For example, here's a rule that adds a fixed spacing of eight pixels to all sides of a paragraph:

 p {       margin: 8px;     }

Tip: You can supply margins as fixed pixel values (in which case you always get the exact same size ) or as percentages (in which case the margin is a percentage of the width or height of the current document window).

This particular rule doesn't have much effect, because eight pixels is the standard margin that Web browsers apply around block elements (on all sides). The eight-pixel margin ensures a basic bit of breathing space. However, if you're looking to create dense pages of information, this space allowance can be a bit too generous. Therefore, many Web site developers look for ways to slim down the margins a little bit.

One common trick is to close the gap between headings and the text that follows them. Here's an example that puts this into action using inline styles:

 <h2 style="margin-bottom: 0px">This heading has no bottom margin</h2>  <p style="margin-top: 0px">This paragraph has no top margin.</p>

You'll notice that this style rule uses the more targeted margin-top and margin-bottom properties to home in on just one margin. You can also use margin-left and margin-right to set different margins on all sides. Figure 6-11 compares some different margin choices.

Figure 6-11. When you want to change the spacing between page elements like headers and paragraphs, you need to consider both the top and bottom tags. For example, if you stack two paragraphs on top of each other, two factors come into playthe bottom margin of the top paragraph, and the top margin of the bottom paragraph. The browser uses the largest of these two values. That means there's no point in shrinking the top margin of the bottom tag unless you also shrink the top margin of the bottom tag. On the other hand, if you want more space, you only need to increase the margin of one of the two tags.

If you're daring, you can even use negative margins. Taken to its extreme, this can cause two tags to overlap.

Note: Unlike most other CSS properties, margin settings are never inherited. That means if you change the margins of an element, other elements inside that element aren't affected.