Global White Space Reset (CSS/html)

This may not be useful to many people, but I thought it was interesting. If you do web design and use css you'll probably like this... I found this post at leftjustified.net about a neat way to "reset" the padding and margin css information which can help for designing sites to display the same when using CSS. Unfortunately, many browsers have little quirks in displaying css, maybe they have strange default settings which cause css placement to look, well, strange, from one browser to another... in comes this little trick...

1. * {
2. padding:0;
3. margin:0;
4. }

Simple, elegant and effective reset of padding and margin information. They take it a bit further though...

Here's another example

1. * {
2. padding:0;
3. margin:0;
4. }
5. body {padding:5px;}
6. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { margin:20px 0; }
7. li, dd, blockquote { margin-left: 40px; }
8. fieldset { padding:10px; }

Nice, but it has fixed px placement - what if someone resizes the browser or changes fontsize???

1. * {
2. padding:0;
3. margin:0;
4. }
5. h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; }
6. li, dd { margin-left:5%; }
7. fieldset { padding: .5em; }

Very nice... very fluid and very consistent rendering. The link above has example pages to browse as well. This is one of the nicest css tips I think I've seen.