Sentinel: Your Web-Performance Watchman

Mo’ robust paragraph indenting

Written by on CSS Wizardry.

Table of Contents
  1. Spaced and indented – allegedly wrong
  2. Spaced only – looks and works fine
  3. Indented only – doesn’t work
  4. Spaced and indented fixed – perfect

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!


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.