Something I see more and more of as I peruse the blogosphere is comment paragraphs without any padding or margins added. Don’t these bloggers know that white space adds to a website’s readability? But, then again, it’s not entirely the blog author’s fault–it’s the theme designer’s.

One of the latest and greatest methods in CSS, though it’s been around for a while, has been making its rounds lately: nullifying the padding/margins universally (or by individually chosen selectors) in order to make it consistent in all browsers.

* {margin: 0; padding: 0;}

This can be a lifesaving tool when it comes to CSS coding, but it can be a nightmare if you don’t actually take the time to add that necessary spacing (i.e. padding/margins=white space) back into the document.

[selector] {margin: 10px 0; padding: 2px;}

So, if you’re in the business of distributing themes or creating a design for someone, double check to make sure you’ve added the appropriate white space to all of the selectors which are likely to appear or be used.

The most often overlooked, unfortunately, seems to be the paragraph tags in the comments. Oh, the paragraphs are there in the source code, but they appear to be one jumbled mess when viewed in the browser.

image

Rather than apply padding and margins to the paragraphs in the content, take the time to create a universal rule that will encompass all paragraphs and then get more specific with the content and sidebar paragraphs.

p {margin: 10px 0; padding: 2px;}
#content p {margin: 5px 0 10px; padding: 0;}
#sidebar p {margin: 5px 0; padding: 0;}

Some other selectors you may want to pay special attention to when using any margin/padding nullification are tables (and all their tiny bits), lists (ordered, unordered, dictionary), headings, block quotes and code blocks.

That is my friendly tip for the day–go forth and check whether your comment paragraphs (as well as the other elements of your site) are readable.