Mo’ robust paragraph indenting

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.

By Harry Roberts on Tuesday, December 21st, 2010 in Typography, Web Development. Tags: , | 3 Comments »

+

3 Responses to ‘Mo’ robust paragraph indenting’

  1. Kilian Valkhof said on 22 December, 2010 at 6:31 pm

    Cheers Harry, excellent way to do this! Though, instead of negative margins, you could also use the :first-child selector, like so:

    p {
  text-indent:2em;
}
p:first-child {
  text-indent:0;
}

    Which I think is a neater method because you don’t have to use negative margins. Granted, you lose compatibility with old IE’s.

  2. Brando said on 22 December, 2010 at 8:51 pm

    You lose IE6 with those ‘+’ and ‘>’ selectors anyway. IE7 supports them AND first-child (but no last-child).

  3. Kevin Rapley said on 30 December, 2010 at 1:28 pm

    @Killian your solution would then still have the issue Harry was trying to overcome when you get to the last paragraph. The last paragraph will usually require a bottom margin to provide some space between a subheading, or just to provide an elegant bottom margin at the end of the page.

    If you were using the capabilities of CSS3, then you could add the following rule:


    p:last-of-type {
    margin-bottom: 1em;
    }

    I normally use Keith Clark’s excellent Selectivizr to enable these types of CSS3 pseudo classes cross-browser. Because the adjacent sibling combinator does not work in IE6, I would opt for this:


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

    p:first-of-type {
    text-indent: 0;
    }

    p:last-of-type {
    margin-bottom: 1em;
    }

    Using :first-of-type over :first-child, means that all starting paragraphs will have an indent, rather than just the very first of a given container.

Leave a Reply

Respond to Mo’ robust paragraph indenting

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs