1. Indenting Paragraphs and Blocks

CSS Goodies

Version . Copyright © By Ben Whisman. All Rights Reserved.

This area will add a few common web styling needs. This may get an area of its own. Articles and tips will be added periodically.

This covers HTML5 and CSS3 that can be used in any current browser version. Advanced features that may have trouble in older browsers will be marked.

Indenting Paragraphs and Blocks

A common question is, “How do I indent or not indent paragraphs or headings?” Here’s how. We’ll explain the common style settings and then we’ll show how to put them to use. So be patient, we’ll get there.

This tip assumes you know to put CSS style code in a style block in the head of your web page, or in a separate .css file and included in a web page with the link tag in the head of your web pages.

Here are our CSS styles, all in one place, to avoid repetition.

indents.css
  1. .indent0 { margin: 1.0em auto; text-indent: 0.0em; }
  2. .indent1 { margin: 0.0em auto; text-indent: 1.5em; }
  3. .indent0 p { margin: 1.0em auto; text-indent: 0.0em; }
  4. .indent1 p { margin: 0.0em auto; text-indent: 1.5em; }
  5. .first0, p.first0 { margin-top: 3.0em; }
  6. .first1, p.first1 { margin-top: 3.0em; text-indent: 0.0em; }

First, the .indent0 style in line 1. Let’s look at how the default paragraph style is set for a plain web page. It gives a block-indent, business letter style paragraph.

The first value in the margin is the vertical, y-axis, top and bottom margin. These are like your word processor’s Space Before and Space After. The top and bottom margins are set to 1.0em, which is 1.0 times the font-size, for a full blank linespace above and below.

The second value in the margin is the horizontal, x-axis, left and right margin. These are like your word processor’s Left Indent and Right Indent. The left and right margins are set to auto, which centers the block within its containing block.

The text-indent is like your word processor’s First Line Indent. The value is set to 0.0em, 0 space from the left in addition to the margin-left. If non-zero, this is blank space in the amount of X times the current font-size.

Second, the .indent1 style in line 2 is a paragraph-indent you probably learned in English or Typing class.

The margin statement says, no space between paragraphs.

The text-indent statement is 1.5em this time. For newspaper, magazine, or books, we use between 1.0em and 2.0em of space. For a 12pt font-size, the default in most word processors, 1.5em gives us 18pt of space, which is 0.25 inches.

The old industry rule of thumb would be 1.0em or 1.0pica or 12pt, which is 1/6 = 0.166667 inches. Yes, if you took Typing class, that's the same as one vertical linespace of text.

Why do we use ems, and what is an em, anyway? We use ems because they are a relative measurement like percentages, so things scale well no matter where (or on what) your web page is viewed.

An em gets its name from the width of the letter M, originally the widest letter, before there was a W. The em unit is a square the same width as the font-size in points. There are standard em-dashes and em-spaces. An en-dash and en-space are half that width. A hyphen and a space are roughly one quarter of an em. If you took Journalism class, you might have learned the old way of estimating copyfitting.

We will keep both the .indent0 and .indent1 classes handy for use.

Now we can set our web page paragraph style to use either one of those by default. Do not set your word processor’s Default paragraph style this way, because unfortunately, it uses that for everything, not just a paragraph, but everything else. Set p { } as either the contents of .indent0 or .indent1.

This sets all paragraphs to use that indenting style. Then if we want to override the default and use the other, we either set a particular paragraph to class .indent0 or class .indent1, or we create a div and give it that class, if we want a whole range of paragraphs in that class. But if we set the div, then we need lines 3 and 4.

Where the div gets the .indent0 or .indent1 class, and the p paragraphs within it all get taken care of automatically without specifying another class.

But what if we want, say, the first paragraph after a heading, such as the first paragraph of a chapter, to be indented specially?

Then we create special adjusted first paragraph styles in lines 5 and 6.

The .first0 can be added to any paragraph, either the .indent0 or .indent1, and just adds a top margin of 3.0ems or blank lines. You can use 1.0em if all you need is the normal blank line, or 3.0em if you want some breathing room at the start of a chapter.

The .first1 is a special case where we want the paragraph indent of .indent1 for standard newspaper, magazine, and novel/book paragraphs, but where we want that first paragraph after a heading or chapter to be flush-left, without the firs-line or text-indent.

It gives us a margin-top of 3.0em (you could use 1.0em) and keeps the margin-bottom at 0.0em. It zeroes out the text-indent of the usual paragraph-indent.

Then if you also want a drop cap at the start of a chapter, you can add that too. We’ll get to that in another tip.

Note: The other form of the margin keyword is: margin: top right left bottom; (“TRouBLe”) when you want to be more specific.

Now we are ready to put these all to use.

div class="indent0"

Paragraph with p class="first0"

Second frightfully funny and riveting paragraph.

Last amazingly witty and relevant paragraph.

div class="indent1"

Paragraph with p class="first0"

Second frightfully funny and riveting paragraph.

Last amazingly witty and relevant paragraph.

div class="indent0"

Paragraph with p class="first1"

Second frightfully funny and riveting paragraph.

Last amazingly witty and relevant paragraph.

div class="indent1"

Paragraph with p class="first1"

Second frightfully funny and riveting paragraph.

Last amazingly witty and relevant paragraph.