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.
A spaced and indented paragraph would use the following CSS:
p{
margin-bottom:20px;
}
p+p{
text-indent:2em;
}
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;
}
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.
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.
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.
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.