HTML 4.01 Tutorial : Align and Indent

Align and Indent

Indenting Text

You've probably noticed that most HTML paragraphs (such as this one) don't have an initial indent. However, you can add an indent with the text-indent property. The following CSS snippet adds a 2.0em indent to all paragraphs:

Indented Paragraphs (`source`)

p {
  text-indent: 2.0em;
}

The effect is straightforward:

Indented Paragraphs (Results)

"On the contrary," said Holmes, quietly, "I have every reason to believe that I will succeed in discovering Mr. Hosmer Angel."

Mr. Windibank gave a violent start, and dropped his gloves. "I am delighted to hear it," he said.

"It is a curious thing," remarked Holmes, "that a typewriter has really quite as much individuality as a man's handwriting. Unless they are quite new no two of them write exactly alike. Some letters get more worn than others, and some wear only on one side. Now, you remark in this note of yours, Mr. Windibank, that in every case there is some little slurring over the e, and a slight defect in the tail of the r. There are fourteen other characteristics, but those are the more obvious."

If you enter a negative value for text-indent, the first line of the text will shift to the left. This can be useful in creating "hanging indents" for headings and the like. The only trick is that you must set the padding of containing block accordingly.

Hanging Indent (`source`)

div {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 30px;
  border: 3px solid;
}
h4 {
  text-indent: -25px;
}

The "container" <div> has a uniform padding of 5px all around, except for the left padding, which is 30px. The <h4> tag has its text-indent set to negative 25px. This means that:

The <h4> shifts 30px to the right (due to the padding) and then shifts 25px to the left (due to the negative text-indent.
Everything else should be 30px from the left edge.

The result is a 25px hanging indent.

Hanging Indent (Results)

The Red-Headed League

I had called upon my friend, Mr. Sherlock Holmes, one day in the autumn of last year, and found him in deep conversation with a very stout, florid-faced elderly gentleman, with fiery red hair. With an apology for my intrusion, I was about to withdraw, when Holmes pulled me abruptly into the room and closed the door behind me.

Horizontal Alignment

The text-align property allows you to align text to the right, left, or center within its containing block. The four options are:

left (usually the default)
center
right
justify (justify both edges of the text)

Let's take a look at all four options:

Left, Center, Right, Justified (`source`)

div {
  border: 3px solid;
  padding: 5px;
}

div.left {
  text-align: left;
  background: #ffcccc;
}

div.center {
  text-align: center;
  background: #ccffcc;
}

div.right {
  text-align: right;
  background: #ccccff;
}

div.justify {
  text-align: justify;
  background: #ffffcc;
}

Note that the justify option isn't as well-supported in some browsers as the other options. If you're using an older browser, you might not see the justify option working properly.

Left, Center, Right, Justified (Results)

Left-aligned text.

Centered text.

Right-aligned text.

Justified text. This text needs to be kind of long, so that we can see that it is justified on both sides of the box. Obviously we need to prattle on for a bit before we can stop. How long does it have to be, anyway? Well, that depends on the size of the window and the font you're using. Here is probably a good stopping place. So we'll stop here. Riiigghhtt... now.

The text-align property affects text and images inside of blocks -- it does not affect blocks themselves, such as <div>s and tables. We'll cover the alignment of blocks when we cover CSS positioning in the advanced section.

Next: Tables

Table of Contents