How-to #6:
Indent text on a web page

Sooner or later any web designer is probably going to want to indent text on a web page. This is actually quite easy, and as usual there are several ways to do it. The first thing to decide though, is whether you want to indent the first line of a paragraph, or every line in the paragraph.

1. Indenting the first line

There are three ways to do this.

(i) Using an invisible graphic

If you insert an image at the start of the line, the text will be indented by the width of the image. The second line of text will, unfortunately, also be shifted down if the image is taller than one line of text. And what if we don't want to see an image?

The trick is to use a 1x1 pixel transparent .GIF file, which takes no time to download, and which we can stretch to however wide we want without distorting its apperance - because it won't be visible. The first line of the following paragraph is indented 30 pixels using this method:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution

You can't see the image, but if you check the HTML for this page, you'll see this:

The height of the image is important - set it to 1 pixel to avoid displacing subsequent lines downward.

(ii) Using non-breaking spaces

We can achieve the same effect with non-breaking spaces. The paragraph below is indented by 10 such spaces:

Again, you'll need to examine the HTML where you will see 10 ' ' codes at the start of the line.

(iii) Using CSS

The above methods are all very well, but both require you to remember to insert the image or spaces at the start of each line. The advantage is that they should work with even the earliest browsers. There's a better way and that is to use cascading style sheets (CSS). CSS has a 'text-indent' setting which will do exactly what we want. The same paragraph, this time using a style with text-indent set to 30 pixels:

In the HTML you will see that the <P> tag has a style set like this:

(It also has a class set as well, but that just gives the text its pale yellow colour - it's not important for the text indenting.) The above style uses pixels as the unit of measurement but you can use a variety of others including points, picas, ems, a percentage, etc.

As a general rule, the CSS method is much to be preferred unless you absolutely need to support really old browsers which don't understand CSS text-indent.

2. Indenting the whole paragraph

Once again, there is a CSS way (two,actually) and a non-CSS way, and the CSS methods are much better.

(i) Using CSS margins

CSS allows you to set margins for all sides of the paragraph, not just the left edge. As with text-indent, a variety of units can be used; the paragraph below uses a left margin of 30 pixels:

The style syntax used here is:

(ii) Using CSS padding

You can also use CSS to display space between the borders of a paragraph and its text content. This is called padding, and you set it in the same way as the margin. The same paragraph is now indented using padding of 30 pixels on the left edge:

The style is:

The obvious question is whether you should use margins or padding. Often it won't make any difference, but it could do in one case, and that is if the paragraph has a background different to that of the page. The two paragraphs again, this time with a coloured background:

Using margins:

Using padding:

As you can see, the background colour extends into the padding area whereas it doesn't with margins.

(iii) Using a table

If you really can't use CSS, then you could use a table. Insert a table with the desired width (e.g. 100%) with one row and two columns. Set the first column to be the width of the desired indent, say 50 pixels. Put the paragraph content into the second column, and you get this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis

The disadvantage of this method is that your paragraphs must go into a table, and unless you insert multiple tables, you can't have some paragraphs indented and others not.

That concludes our look at text indentation. Don't forget that we have only looked at left edge indents! using CSS margins or padding, you can indent the right edge and affect the top and bottom edges, too.

Page last updated: March 14th 2004

How-to #6: Indent text on a web page

1. Indenting the first line

2. Indenting the whole paragraph

How-to #6:
Indent text on a web page