Global White Space Reset

19 Oct 2004

Recap

Here’s the CSS snippet in question.


* {
	padding:0;
	margin:0;
}

The aim here is to save time when dealing with the minor cross browser differences caused by varying default values for these properties.

Who Benefits the Most?

The people who would benefit the most from using this technique are those who are just starting to build entirely CSS styled sites and are in danger of developing the very common conditions of ‘class-itis’ and ‘div-itis’ instead of directly styling and positioning semantic elements. Cameron summed it up perfectly:

The most oft-cited reason for not using semantic HTML is the perceived control that can be achieved by using tables/a lot of divs. By removing this “mystery” dimension from the size of elements, it could help people to become accustomed to styling semantic HTML.

Correct Usage

This technique was added as an afterthought to the original post and as such was not accompanied by any details regarding exactly what is required of the developer if they use this approach. Firstly, it is important to remember that this rule cancels the padding and margin of every single element; something which has already been found to have the negative side affect of hiding the drop-down arrow of a select form widget in Firefox. That problem is very simple to fix, (re-apply padding to select select { min-width:1.5em; } – thanks Bryan) but it does bring up a good point — care should be taken when applying this rule to a page which contains forms as usability must remain paramount whenever styling forms.

Examples

That brings me to the second point regarding correct usage; following the declaration with your own global padding and margin rules. If we look at this unstyled test page, and then the same page with the rule applied, you can see just how drastic an effect this declaration has.

Now that you’re comfortably in control of the padding and margins in every CSS able browser, it’s time to do something useful with that power. You could stick in something like this:


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

View test page 3

This will basically replicate the original layout of the page in Mozilla, only it will be cross-browser; no differences on lists or other troublesome elements in IE or anywhere else. That’s effective, but it’s far from exciting. What about if we replaced all the values with relative units (% or em)?


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

View test page 4

Hey now, that’s a bit more like it! Now we have the basis for a site whereby all side margins are controlled by browser width and all vertical spacing is controlled by font size. Quick, simple and highly usable — this could easily be used as the basis for a solid but highly flexible fluid layout. All you need to do now is add the columns ;-) .

Have something to add? Comments are open as always…

Thanks to Russ for saving me from having to type out the elements used for the test page.

Filed under: ,

46 Comments

  1. Jim:

    Well written. This information is quite useful, especially to those new to CSS styled design who haven’t (unwillingly) commited every last browser difference to memory. This levels the playing field a bit and makes site design quite a bit easier.

    Despite my experience with CSS and XHTML, my next design will most likely make use of your “Fluid Global White Space Reset” style sheet above.

    Thanks.

  2. Geoffrey Sneddon:

    Well written, also test unstyled example and test 3 look almost identical in Safari, although there are small variations.

  3. Seth Thomas Rasmussen:

    That’s a nice combination of your original technique and more of the type of approach I was trying to describe that I use by defaulting margins to run “top-down” etc.

    :thumbsup:

  4. Jeff Croft:

    Great stuff, Andrew! nice to see this follow-up article giving practical applications. Way to go.

  5. Malarkey:

    Great Stuff Andrew!

    You learn something new every day and this is the best thing today.

    (Love the live preview btw, was this here before?)

  6. Andrew:

    I’m blown away that something this simple that I’ve taken for granted for so long as been useful to others. I’ve already heard via Lachlan that a class of high school students who are learning CSS have adopted this technique, which is awesome! Anything we can do to make semantic markup easier for beginners is a step in the right direction.

    Malarkey: Cheers mate, it’s been the same since day 1… That’s why I had the nerve to have a go at you about your entire preview box not being created by js ;-)

  7. Natalie:

    I’d never thought to use the global selector in this manner before. Reading the discussion on WSG, then the original article here and now this improved description has really opened my eyes to the possibilities.

    Thanks for the great write up.

  8. Kris Khaira:

    One of the most useful and simplest lines of CSS ever.

  9. Zulema Ortiz:

    Thanks for providing further details! And for making my life a little easier. :D

  10. Chad Smalley:

    This is brilliant — I’m tempted to start reupholstering all my sites right now.

  11. sean:

    This is such an obvious time-saver and headache-reducer that I am pounding my head on the table for never having thought of such a simple solution. Thanks, and now it’s time to implement this in all of my sites :)

  12. David Horn:

    Thank you, Thank You, Thank you! Just starting to work on sites purely with CSS – this is invaluable.

  13. Sean Smithers:

    Where was this when I started a major website redisign? ;^)

    Will be incorporating it as a major headache saver and it will be eliminating a lot of extraneous junk that was simply to zero out or fix margins.

  14. Nick Fitzsimons:

    This has been the first rule I type into every style sheet I create for some time now. I’m glad you’ve presented such a lucid explication of it – better than I would have achieved if I’d ever got around to writing it up. I will definitely be referring junior developers new to CSS to this page from now on.

  15. Rob:

    Thanks mate, helped a lot :-)

  16. Richard@Home:

    how about adding a

    border: 0;

    to save you a few lines of css later:

    img {
    border: 0;
    }

    I bet everyone has this block in every stylesheet they’ve written ;-)

  17. Andrew:

    Richard@Home: That’s overkill, considering that you are thereby seriously deforming the default style of all form widgets. This came up in the comments of the original post and it was generally found that it did more harm than good. To each their own, but that was my reasoning for not including such a declaration.

  18. Mitchell:

    Interesting stuff. However, here is another side to the issue of applying that “universal” rule to all page elements.

    All browsers will display, say an h1 header element, without style sheets, according to the browser’s default settings. (You can change its margin and padding, its true, using a simple rule like that.) The older agents, like IE3 and Netscape4, do basically the same thing, but may not support your style, so if you reset some properties for the page, suddenly you will find yourself with two very different views concerning how your tags look. To make things more worse, some tags, like definition lists and lists in general, use various forms of margins and padding, to control how those items format those elements by default. And that depends on the browser. You can quickly create a mess if you reset anything for all tags, as some padding and magins is a critical part of the default layout for those tags. I found this out the hard way when I started trying to design my own “universal” style sheet for all xhtml elements. I spent hours and hours trying to figure out how IE, Netscape, and Opera use margins on ul and li tags, and finding a set of styles that woudl allow me to “bring them back” to their “default layout” if I needed them to perform again like real lists. Not an easy task! I found a solution to that problem, but it wasnt pretty.

    So, this is a cool concept, but from my experience, be careful. If you start applying universal rules that reset all tags the same way, your pages not only deliver two differnt looks for browsers with and without style sheets, but you run into trouble with how different browsers format the core tag set, and some tag layouts might not come out as you expected. Getting them back to something presentable later using css, like in the case of nested lists and margins, is actually quite complicated between agents, and it might not be worth the risk, depending on what you are trying to accomplish.
    -Mitchell

  19. Luc:

    Awesome article. I always used it on the body element but this is far more efficient.

  20. Luc:

    Was wondering if :

    * {
    padding:0;
    margin:0;
    }

    was so much different from using:

    html, body {
    margin : 0;
    padding : 0;
    }

  21. Andrew:

    Mitchell – I haven’t seen IE 3 since I was a child… As for NN4, I don’t serve CSS to NN4, so there is no problem there. Re-establishing default list presentation is simple — ul { padding-left:30px; }. I don’t mean to be rude or shoot you down, but I totally disagree with all the points in the second half of your comment, even though I’ve read through it about 15 times. If you would like to discuss your concerns further, feel free to contact me and we can take a more in depth look.

    Luc – Yes, very much so. Universal selector ‘*’ is just that — universal. It selecets every single element on the page, no exceptions. The declaration you posted only affects the html and body elements.
    HTH :-)

  22. Luc:

    Mmmm, yes according to select oracle it does indeed. But doesn’t it give the same effect? I mean it selects any htlm element or any body element, in other words any element also?
    Or am i rambling like a fool this late?

  23. Andrew:

    But doesn’t it give the same effect? I mean it selects any htlm element or any body element

    Not quite — your rule selects the html element and the body element. There are only ever one of each. Paddings and margins, unlike font styles, are not inherited. Any changes you make to a single element will not be applied to the children of that element.

  24. Luc:

    Yeah, when i woke up i saw i was rambling (posting at 3 in the morning isn’t good for me lol).

    Although i always relied (maybe to much)on select oracle which gives me the html _or_ body explanation.

    Anyways, i’m in the mids of putting a new template together and it gives me the opportunity to use your example. I’m interested to see the effect ;-) (long time habbits are hard to erase)

  25. Subbu:

    So happy to have found this article. I was looking for a way to avoid the DEFAULTS :^D Thanks alot

  26. David Kaneda:

    Hey, this isn’t really related to white-space resetting, but in terms of resetting values for browser consistency, I thought I might mention the following technique I use for text size:

    body {
      font-size: 67%;
    }
    * {
      padding: 0;
      margin: 0;
      font-size: 1em;
    }
    

    This effectively eliminates ie’s cruddy supersizing of table text, and allows for consistent relative text sizing in em’s.

    Hope this is of use:

  27. Brian Drum:

    Good follow-up Andrew. With regards to the select issue on Firefox, I’ve been trying out solutions and this one seems to work the best:

    1. option {
    2. min-width: 1.5em;
    3. }

    Rather than adding padding to all option lines whether they need it or not, using min-width will only affect the small select boxes that need it, plus it will be ignored entirely by browsers like IE that don’t support it and aren’t part of the problem in the first place.

  28. Andrew:

    Brian — elegant and effective solution :-) Thanks for your contribution.

  29. Michael:

    This tip is useful beyond words. My head started to ache when considering the many hours I’ve spent wrangling the magical mixture of margin and padding across browsers. Thanks for sharing!

  30. Mark Wiens:

    Funny, I was thinking about this same subject the other day. The Universal Selector

  31. Anoki:

    So, wait… I’m just new to CSS and have been trying to teach myself the box model, browser differences, and Tan vs. Tantek… does this just get rid of that and I’m starting with the basic fresh canvas we all want? (Please say “basically Yes”…

  32. Geoffrey Sneddon:

    Basically Yes :)

    I’m using this technique in my upcoming blog, as otherwise I’d be setting the margin to 90% of the elements as 0px…

    If anyone is wondering, it’s currently being developed on WP 1.3-aplha-5, and won’t go live till 1.3 Gold comes out.

    Just came here to check the default p, pre, blockquote margins :)

  33. Anoki:

    Wait… it didn’t work… what do I need to do to implement this hack after I’ve already set everything up? This is prolly not the right place to ask… help?

  34. Geoffrey Sneddon:

    In you’re CSS you have

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

    So sorry, fellas, I’m the ball dropper who got frustrted and took an easier way out, sorta… I can’t wait to run across some more sites that use it so’s I can learns it!

  36. Florent:

    Hello! I am looking since monthes infos about the best web standarts, mostly about CSS of course. I designed my last site ( http://www.bagatella.org )quite only with CSS but it is really not always easy, especially as you know some problems with Firefox for example …And I want to learn more XHTML and PHP :-D God! It’s a pity you seems do not have a newsletter, this site is really well made. Thanks a lot for your informations and also for the interesting comments. Bye from France!

  37. Scott Johnson:

    I saw mention of this technique somewhere on my blogroll a while back but I couldn’t remember where I had seen it. Now, finally, after hours of searching, I have found this page. Thanks for putting in the time to write this up. This technique will be a lifesaver for my future designs!

  38. shawn:

    I’m surprised to have not seen anyone mention Tantek’s fabulous undohtml.css.

    It strips away much of the default browser styles, allowing you to have control over everything. I’m in the habit now of throwing that into my main stylesheet all the time and it’s been such a timesaver.

    FYI, in Firefox/Mac, the checkbox for ‘Do Not Save My Info’ is about 200px wide.

  39. Braxton Beyer:

    I haven’t had time to try this, but regarding the form issues, couldn’t you use:

    form * {
    margin: auto;
    padding: auto;}

  40. Avril:

    I couldn’t wait to try this out after seeing it in your presentation last night. It’s just so simple.
    And so, I have now removed about 25 extra margin:0; and padding:0;‘s from the site I’m working on. Feel the power!

    Thanks Andrew :-)

  41. Tzvetelin N.:

    yo!

  42. Ivan:

    Hey, great thoughts everyone! But aren’t we left out the select optgroup and select option? Here’s my suggestion:

    select {
        min-width: 1.5em;
    }
    
    select optgroup {
        margin-left: 2%;
    }
    
    select optgroup option {
        margin-left: 10%;
    }
    
  43. Peter Odding:

    “By removing this “mystery” dimension from the size of elements, it could help people to become accustomed to styling semantic HTML.”

    I guess that doesn’t count me in.

    I’ve been creating/using CSS layouts for over two years, and the first thing I do when I want complete control of my layout is set all margins and paddings to zero.

    I’ve also created a common stylesheet that I import to reset these margins / paddings and then apply some general whitespace, e.g:

    table, ol, ul, dl, p, pre { margin-bottom: 1em; }
    ol, ul { margin-left: 1em; }

    etc…

    I’d absolutely recommend this technique to anyone who wants complete control!

  44. Mark Pearson:

       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; }
    
    ...whereby all side margins are
     controlled by browser width and
     all vertical spacing is 
    controlled by font size.
    

    So, my question is, why have some units in em and others in % and why use em for vertical spacing and % for horizontal?

    This also illustrates the importance of understanding the theory of CSS

  45. Andrew:

    Mark: The reason for this choice is that using ‘%’ for horizontal spacing creates variable width ‘gutters’ that adjust to suit the browser width, while using ‘em’ for vertical spacing ensures the font-size, line-height and vertical padding/margins all increase proportionately to each other.

  46. 3e6.com:

    This tip is useful beyond words. My head started to ache when considering the many hours I’ve spent wrangling the magical mixture of margin and padding across browsers. Thanks for sharing!