Jon M. Zuck

You know it, you use it, you love it. I don’t remember who first came up with the “universal white space reset,” but it’s been around for years now, and it’s advantages are plain to see.

Just start off your stylesheet with:

* {margin: 0; padding: 0;}

and bam! suddenly you, not the browser manufacturers, are in control of the “white space” of every element. No worrying about differing bottom margins on headings, paragraphs, or anything else, for that matter.

So what’s the problem? In a word, the universal whitespace reset is dumb. It’s not necessarily a dumb thing to do—I simply mean that it lacks the intelligence to see when it should be applied and when it shouldn’t. I first encountered a problem with it when I was using on a dynamic site that retrieved large amounts of inventory items. I found that these inventory search results were consistently crashing in Internet Explorer (go figure), but it stopped crashing when I removed the universal whitespace reset from the stylesheet.

What was happening was every element, every em, i, b, every table, tr, td, every img, div, and p, was being checked for the presence of dreaded padding or margin, and IE was being crushed by the task. (Sometimes you’ve got to feel sorry for Internet Explorer.)

Another disadvantage is that in any environment where non-coders might be editing pages to any extent… (e.g. clients via a CMS) some of the most familiar and intuitive means of working with tables become unpredictable. For instance, in both Firefox and IE, the cellpadding attribute becomes useless. In standards-friendly browsers such as Firefox, the “align” attribute stops working when the value is “center.” (Yes, it centers via equal margins, but with the universal white space reset, you, my friend, have wiped out those margins.) CSS declarations, even with very low precedence levels in the cascade, override HTML attributes.

Since the whitespace properties of margin and padding don’t even occur in most inline elements, it doesn’t really make sense to have the browsers check them on every page, now, does it?

Here’s my proposed solution to creating a level playing field regarding whitespace concerns:

address, blockquote, p, div,
form, iframe, select, textarea,
h1, h2, h3, h4, h5, h6,
dl, ol, ul, li, dt, dd
{margin:0; padding:0;}

This deals with all of the major elements most likely to create whitespace problems, without squandering browser resources or disabling HTML attributes. You may also be interested in Eric Meyer’s solution, although his reset stylesheet deals with many tags that are unlikely to have padding or margin presets in browser stylesheets. He also goes for a complete font-weight/font-style reset—as for myself, I can live with the fact that browsers give bold text for headings and italics for cite. I’ll restyle those assumptions when I feel the need to. Also, if one limits the reset to matters of margin and padding only, it seems to make sense to me to include form elements. What do you think?