What's a solid starting point (global reset) for a CSS file?

Browsers often have different ways of rendering the same element. For example we expect lists to be left-indented. Firefox does this by applying a left padding of 40 pixels to an unordered list (<ul>). Either Opera or Internet Explorer acheives the same effect by applying a margin of 40 pixels.

Now this is fine and dandy if you don’t want to change that indent value.

Let’s say you test in Firefox want to pull the list back a little so you:

ul { padding-left: 30px;}

Looks good… until some other browser adds that 30 pixels of padding onto their 40 pixels of margin. Crap. The original solution proposed was simple and elegant:

  • {
    padding:0;
    margin:0;
    }

It also broke forms and obviously is not inclusive of everything for a true “global whitespace reset.” You can read more on this implementation (which was revised) on the now classic leftjustified.net post.

Yahoo! have their own CSS Reset, which has a broader scope. Not sure setting h1 through h6 at 100% is an improvement over default behaviour though. ^^

An alternate (still in progress) reset is up at Eric Meyers website, and has evolved through a couple comment heavy blog posts.

Back to top