Mo’ robust paragraph indenting

Written by Harry Roberts on CSS Wizardry.

I read somewhere once that to space and indent paragraphs of text is not a good idea and that you should pick one or the other. Either indent or space, but never both. I can’t remember where I read this, all I know is that it was in some type book in Magma, Manchester and that I personally agree with it. I don’t know what the type big-wigs think, but for me, I find both indenting and spacing of paragraphs somewhat unsightly.

Spaced and indented – allegedly wrong

A spaced and indented paragraph would use the following CSS:

p{
  margin-bottom:20px;
}
p+p{
  text-indent:2em;
}

Spaced only – looks and works fine

If you just want a spaced paragraph it’s just as simple as p{ margin-bottom:20px; }. Job done. If you want spaced paragraphs then that’s all you need:

p{
  margin-bottom:20px;
}

Indented only – doesn’t work

If you want an indented paragraph, simply:

p{
  margin:0;
}
p+p{
  text-indent:2em;
}

However, as you can see, the problem here is that anything following a paragraph with margin:0; will be butted up against that paragraph. There will be no space between any element following a paragraph.

Spaced and indented fixed – perfect

To fix this, give those paragraphs their margin-bottom:20px; back, meaning you have the spaced and indented look once again, but then on the p+p apply a negative margin-top equal to that of the regular margin-bottom:

p{
  margin-bottom:20px;
}
p+p{
  text-indent:2em;
  margin-top:-20px;
}

Here we have the ideal, every paragraph after the first (in a block) is indented and unspaced. The last in a block is spaced meaning a gap between a paragraph and its following element. Easy.

Did this help? We can do way more!