HTML and CSS Reference
In-Depth Information
p {
text-indent: 2em;
}
This moves the beginning of the first line of a paragraph over to the right by two em squares.
Although less common, it's also possible to outdent text by using a negative value on the
text-indent
property:
p {
text-indent: -2em;
}
As you would expect, this moves the start of the first line two em squares to the left.
Typographers generally set opening paragraphs (those that start a story or chapter, and
those that follow a header or other break in the text) without an indent, and then indent the
paragraphs that follow. This can be accomplished using CSS's adjacent sibling selectors:
p {
text-indent: 0;
}
p + p {
text-indent: 1.5em;
}
This will indent only paragraphs that occur directly after another paragraph. Opening para-
graphs (those that follow any element other than a paragraph) will not be indented.
■
Note
Internet Explorer 6 and lower does not support adjacent sibling selectors and will simply ignore
rules that contain them.
In addition to the typical indent, there are other techniques for indicating new paragraphs.
Some typographers use ornamentation to set off a paragraph. This can be accomplished using
CSS's content generation module to place an ornament before the paragraph element:
p + p:before {
content: "\2767";
margin-right: 0.5em;
}
This CSS will place a floral ornament (Unicode character 2767) before paragraphs that follow
other paragraphs. A right margin has been added as well to separate the ornament from the
text of the paragraph.
Another option is to display paragraphs as a continuous string of text separated by ornaments
(commonly used is the
pilcrow
paragraph character). To accomplish this, we must change the
paragraph display value from
block
to
inline
:
