Web design development. Indenting Paragraphs with CSS

Creating Simple Indents

One of the oldest solution to adding lots of non-breaking spaces was using   character to the beginning of each paragraph, creating the necessary white space. While this works, the tedious involvement behind adding   to each paragraph in your document, and then changing the amount of indentation, makes this a undesirable solution at best.

The Cascading Style Sheet standard includes the text-indent property. The value of this property is used to shift the first line of text in a paragraph over to the right. For example, to create a half-inch indent for every paragraph in your document, use:

P { text-indent: 0.5i; }

Across a wide variety of browsers, this may not always be the correct answer. You are better off creating indents that are relative to either the font size or the width of the text flow. For the latter, specify the indentation amount as a percentage. The browser will compute the indentation according to the width of the text flow.

To create indents proportional to the font being used, define the indentation in terms of em's. The size of an em is based upon the size of the font, so the indentation amount will scale as the font grows larger or smaller. This paragraph, for example, uses text-indent: 3em for its indentation amount.

Creating outdents

While you could try to fake out an indent with regular HTML, hanging indents, or "outdents," were pretty much impossible. With a hanging indent, the first line of text extends to the left of the paragraph. You can create a hanging indent by using a negative value for the text-indent property.

Before trying this, take note: The browser will shift the first line to the left, but will not adjust the margin or spacing around the paragraph to account for the shift. If you don't create an appropriate left margin to accommodate the hanging first line, the results will not be pretty. Consider these three style definitions:

  .wrong { text-indent: -3em; }

  .hang  { text-indent: -3em; margin-left: 3em; }

  .large { text-indent: -3em; margin-left: 6em; }

This paragraph uses CLASS="wrong". Since the left margin was not adjusted, the outdented text is pushed left beyond the text flow, ruining the paragraph's appearance.

This paragraph uses CLASS="hang". By setting the left margin to the size of the outdent, the first line touches the left margin, and the remainder of the paragraph is indented.

This paragraph used CLASS="large". Since the left margin is greater than the outdent, both the outdented line and remainder of the paragraph are shifted off the left edge of the text flow.

By adjusting the size of the left margin and the indent, you can achieve all sorts of indenting and paragraph effects.

<< BACK