Margins, Indentations, and Alignments

These are the properties you use to work with margins, indentations, and alignments:

• line-height Indicates the height given to each line. Set this to an absolute measurement or a percentage value, such as 200% to create double spacing.

• margin-left Sets the left margin of a block element.

• margin-right Sets the right margin of a block element.

• margin-top Sets the top margin of a block element.

• text-align Sets the alignment of text. You can set this to left , right , center , or justify .

• text-indent Sets the indentation of the first line of block-level elements. Set this to an absolute value such as 10 pixels, 10px , or 4 points, 4pt .

• vertical-align Sets the vertical alignment of text. You can set this to baseline , sub , super , top , text-top , middle , bottom , or text-bottom .

Here's an example showing how to put some of these properties to work. In this stylesheet, I'm indenting the first line of each paragraph by 40 pixels (for more on the kinds of units you use to specify lengths, see Table 9-1 later in this chapter) and indenting all the text in paragraphs by 20 pixels:

Listing ch09_16.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic}  P {display: block; text-indent: 40px; margin-left: 20px}  

You can see the results in Figure 9-10. As you see there, the first line of each paragraph is indeed indented, and the paragraph text is also moved to the left.

Figure 9-10. Indenting text using a stylesheet.