Classic Typography Effects in CSS: Hanging Indent

A hanging indent, or hanging paragraph, is a paragraph in which the opening line is left of the margin. In other words, the first line has a negative text indent, and that is exactly how it is created in CSS. First, our HTML markup:

Then the CSS code, written embedded or linked:

Our immediate problem is that this style would apply itself to every paragraph. We need to restrict the effective range of the style to the first paragraph. So long as we’re ignoring IE6 (which would require a referenced id on the paragraph to work similarly) and are consistent in our markup, the easiest way is with an adjacent selector:

This creates a problem of its own: the first line of our first paragraph is now likely to go off the left edge of the browser window. To compensate, push the paragraph to the right with margin-left:

We probably want all the paragraphs to share the same left edge, so rather than applying the margin-left to just the first paragraph after the h3, apply it to all paragraphs. Typically, we would also balance the margin on the right-hand side and justify all paragraphs: