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.
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.
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.
|
|
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; }
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.
|
If you're daring, you can even use negative margins. Taken to its extreme, this can cause two tags to overlap.