First Line Indent and Hanging Indent on your Web Site

Standard HTML formatting for text on a web site is that all lines are flush left. In order to indent or outdent the first line of an HTML block element such as a paragraph, you need to use the CSS property text-indent. The text-indent CSS property sets the indent size of the first line of a block of text.

First Line Indent

To indent the first line of every paragraph in every paragraph, you add the CSS text-indent property to your definition of the p tag. Common units for text-indent are pixels and ems.

p {
     text-indent: 18px;
}

This is a paragraph with the CSS property of text-indent set at 18 px. It is meant to wrap so that subsequent lines are not indented, and this can only be accomplished easily with the CSS text-indent property.

Negative values are allowed. The first line will be indented to the left if the value is negative.

p {
     text-indent: -18px;
}

This is a paragraph with the CSS property of text-indent set at -18 px. Notice that the first line extends to the left beyond the normal margin of my blog template.

Hanging Indent

You can take advantage of a negative text-indent combined with left padding so you can create a hanging indent.

p {
    text-indent: -18px;
    padding-left: 18px;
}

This is a paragraph with the CSS property of text-indent set at -18 px and padding-left set at -18px. Notice that although the first line has a negative indent, it does not hang out from normal next flow because left padding was added to compensate for the difference.

Text Indent on Individual Blocks of Text

If you want to add an indent or hanging indent to individual areas of text, you will want to use a class definition rather than changing the indent on every paragraph by redefining the p tag as I did before.

.hangtext {
    text-indent: -18px;
    padding-left: 18px;
}

You then add the class to the block tag.

    This is my text with the hanging indent.