Left Justified
FeedsGlobal White Space Reset
∞ | October 19, 2004 | Category: Cascading Style
The simple technique of resetting all margins and padding that I mentioned almost a fortnight ago has recently created far more discussion than any previous journal entry. After reading some differing opinions via the original post’s comments, email and the WSG list I think it would be appropriate to take a closer look and cover these points in some detail.
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 selectselect { 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; }
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; }
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.
Have Your Say
Sorry, comments are closed on this post.
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.
Well written, also test unstyled example and test 3 look almost identical in Safari, although there are small variations.
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:
Great stuff, Andrew! nice to see this follow-up article giving practical applications. Way to go.
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?)
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
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.
One of the most useful and simplest lines of CSS ever.
Thanks for providing further details! And for making my life a little easier.
This is brilliant – I’m tempted to start reupholstering all my sites right now.
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
Thank you, Thank You, Thank you! Just starting to work on sites purely with CSS - this is invaluable.
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.
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.
Thanks mate, helped a lot
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
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.
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
Awesome article. I always used it on the body element but this is far more efficient.
Was wondering if :
* {
padding:0;
margin:0;
}
was so much different from using:
html, body {
margin : 0;
padding : 0;
}
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
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?
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.
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)
So happy to have found this article. I was looking for a way to avoid the DEFAULTS :^D Thanks alot
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:
Good follow-up Andrew. With regards to the
selectissue on Firefox, I’ve been trying out solutions and this one seems to work the best:option {min-width: 1.5em;}Rather than addingpaddingto all option lines whether they need it or not, usingmin-widthwill only affect the smallselectboxes 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.Brian – elegant and effective solution
Thanks for your contribution.
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!
Funny, I was thinking about this same subject the other day. The Universal Selector
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"…
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
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?
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; }
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!
Hello! I am looking since monthes infos about the best web standarts, mostly about CSS of course. I designed my last site ( 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
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!
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!
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.
I haven’t had time to try this, but regarding the form issues, couldn’t you use:
form * {
margin: auto;
padding: auto;}
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;andpadding:0;’s from the site I’m working on. Feel the power!Thanks Andrew
yo!
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%;
}
“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!
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
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.
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!