Creating indents using CSS

The value of the text-indent property is used to shift the first line of text in a pargraph 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 right 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.

mmm
MMM
mmmm

To create indents proportional to the font being used, define the indentation in terms of em's (an "em" is the "the size of the letter 'm'"; as opposed to an "en", which is "the size of the letter 'n'.") 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. (Though it looks to me, in Internet Explorer, the the browser throws in the space of an extra em for good measure.)

Creating outdents using CSS

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 accomodate 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. moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext .

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. moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext moretext

mmmm
|- LEFT EDGE OF TEXT FLOW

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

more articles like this: visit DDJ.com and do a search on "css"