By Harry Roberts
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
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.
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
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.
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.