Quick CSS spacing tip
I was working on a site there the other night. I had a bunch of text being added to a sidebar, which was cramming in on top of itself. So I added the following line to my CSS (the bulk of the id’s and classes are left out for clarity):
section p {margin-bottom: 1.5em}
Lovely, I thought. All will be well now. But when I reviewed the page, the padding was doubling the space after the last paragraph. It didn’t help that this text was in a section box with a background colour and 20px padding, so that extra 1.5em was making a real mess of my bottom padding. The problem was, these boxes could just have an image, or could have only one paragraph of text. How was I going to resolve this? Then it struck me, I only needed spacing on a paragraph, followed by a paragraph. Doesn’t CSS have a solution for this!
section p+p {margin-top: 1.5em}
This now means that the spacing will only be applied to the top of a paragraph, which occurs after another paragraph. Fantastic! I’m so happy, I’m sharing this with you!