9.3. First-Line Indentation

In the example in the previous section, I centered the text in the explanatory paragraphs under each subheading. That was not, as I said at the time, necessarily a great design, but it did demonstrate how alignment can produce "air" or negative space.

Another, perhaps more conventional, way to accomplish this objective with blocks of text is to indent the first line of each paragraph.

The text-indent property controls the amount of extra left padding that's applied to the first line of a block of text. The property requires a measurement or percentage of the element width as a value.

Replace the style rule for paragraphs in the above CSS with a new one like this:

p {
  text-indent: 2em;
}

The result will look like Figure 9-6.

A variation on first-line indent is first-line outdent , also called a hanging indent, where the first line is closer to the left margin than the rest of the paragraph. You can see this effect in the first paragraph of Figure 9-7.

Here are the CSS rules that we add to the style sheet to accomplish the styling shown in Figure 9-7.

p.outdent {
  padding-left: 2em;
  text-indent: -2em;
}

What I've done here is assigned a left padding of 2 ems to the entire paragraph, and then removed that padding from the first line by setting a negative text-indent of the same amount.

In the HTML, I've simply assigned the outdent class to the first paragraph of the document:

<h1>Ten Keys to Optimum Performance</h1>
<p class="outdent">A careful study and analysis of more than
  35,000 pages of self-improvement materials published in the
  past 100 years leads to the conclusion that there are really
  only 10 basic keys to optimum performance and success.</p>

When you use a negative value for the text-indent property, you have to be careful that the first line of text doesn't end up falling outside the boundaries of the browser window. In general, this means you need to assign a padding-left of at least the same size as the negative indent you choose.