A simple CSS rule appeared recently on the WSG list, generating a fair bit of discussion:
* {
padding:0;
margin:0;
}Highlighted by Andrew Krespanis in his wicked worn blog, this little rule removes all the padding and margins from every element in your page. As you can see from Andrew’s test page, this is a pretty drastic rule so why on Earth would you want to use it? Two reasons: easier debugging and cross browser compatibility.
Many styling inconsistencies occur between browsers because browsers apply their own internal style sheet to HTML elements. These style sheets are very similar, but crucially they do differ. The most notable difference occurs with lists: Safari and Gecko-based browsers (such as Firefox) use padding-left to indent lists; Internet Explorer uses margin-left. Neither are right or wrong, they are just different. Because of this I’m forever making Ie behave like the others by using a rule like:
ul {
padding-left:1em;
margin-left:0;
}There are plenty of similar rules I find I’m applying in every style sheet: removing all padding and margin from the body, un-indenting definition lists and blockquotes, removing bottom margins from headings, removing top margins from paragraphs. By using the global reset rule I can deal with all of these in one go and just apply padding and margins how and where I actually need them.
At first glance it may seem the global reset method requires you to subsequently style the margins and padding of each HTML element that you intend to use. resulting in verbose and wasteful code. However you can zero margins and padding in the one rule set and then set all block level items with margins in a second rule set, resulting in identical rendering across all browsers:
h1, h2, h3, h4, h5, h6, p, blockquote,
form, label, ul, ol, dl, fieldset, address {
margin-bottom: 1em;
}I’ll certainly be using the global reset as the first rule in all my future style sheets. As an aside, Eric Meyer has been investigating removing all default styling (not just padding and margin). His conclusion is an eye-opener.
Small Paul wrote:
Eh, y’see, I used to do a bit of this, but… well… in my case, I often don’t want to decide precisely what the margins and padding should be on every HTML element for every site. The browser defaults have been around for ages, and are often there for good reasons.
I guess it’s just me not being intensely interested or particularly skilled in visual design – I won’t bother trying to change a browser default unless I’ve thought up a better effect, which is pretty rare for me :)
But hey, the more I rely on browser defaults, the less CSS for me to write and the user to download.
Zelnox wrote:
I think this is very useful. I usually set padding and margin to zero everywhere, and then add them back in later.
Does it validate?
Andrew Hume wrote:
Shocking isn’t it how I never thought that one up myself?
I’m constantly creating
margin:0;padding:0;
rules for debugging. Never occurred to apply a generic one. Thanks for the tip.
Nathan Logan wrote:
Like Andrew Hume, I find myself zeroing out margins and padding on elements all over the place.
Thanks for the great tip – this will save me some serious time in the future. Consider this article bookmarked. =)
Andrew Krespanis wrote:
Hi Richard,
Glad you liked this simple little trick :)
Dustin Diaz wrote:
Wow, why haven’t I seen this before?
I mean really, we shouldn’t have to use it, but it makes xhtml more of a markup language than it is.
Whoever decided to put design elements into xhtml was…oh nevermind.
My point being, xhtml should hold meaning alone, and not apply a style to it. such as how <h1> tags are big and contain whitespace, <li> puts a bullet and indents it, etc…
anyway, thanks for the tip here (or to the wasp list).
It helps keep things consistent. Good find.
Thanks
Simon Cox wrote:
I have been using this for a few months now – can’t remember which site I picked it up from (possibly in a discussion forllowing Tantek’ss global default css article ) but it has saved me hours of tinkering especially with complex layouts where differences between the browsers is more apparent than in eth typographical effects.
Often when I am building I will slip a quick border atribute in so that I can see where everything is.
Excellent write up!
mmmbeer wrote:
A better tactic: create a kill list.
There’s a problem when clearing the margins & padding, especially if your page makes use of a form elements. Instead just do this:
form, ul, dl, dt, dd, li, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0;
}
You can then go back and add consistent padding and margin for other less generic containers. For example:
#content ul { margin: 1em 5em; }
Ottawa wrote:
Has the start technique been tested in all browser versions?
Rene Grassegger wrote:
HI there,
Like somebody said before, the issue with the form elements, especially with option fields, a problem in firefox to get it works correct.
I like the old school way. :-)
$0.02em
Rene
Rich wrote:
Does this problem just manifest itself on Firefox/Win then because I couldn’t see any issue with Firefox/Mac using my test page.
Deepak Jha wrote:
Thanks. It was userfull
johnny wrote:
Thank you so much. I’ve spent a whole day trying to get my ul/li to display properly between firefox/IE
This:
ul {
padding-left:1em; margin-left:0;}
Has saved my life.
Great tip.
StarLight wrote:
There is indeed a problem with firefox – the buttons are no longer “pushable” (in a visual sense). If you style them differently than standard (i.e. border, background color) then they behave like static graphics, nothing moves – there’s no animation of “pushing” the button. Can it be somehow fixed? I’m afraid the * { kills also the internal browser states for “animation” of the button.
greetz,
StarLight
bot wrote:
It’s THE technique that I wanted; I just regret I didn’t read your page before I coded my site :) Thanks for the trick and long life to strongly typed languages (well html is not but xhtml tends toward it) and reliable interpreters (neither IE nor Mozilla are but maybe in a 10 years time their rendering will be as reliable as a C++ program’s execution)
gregory wrote:
This is extremely helpful. I have been looking for a solution to this problem for days. Thanks!!
Between this tip and the fix for IE double margin on floats (display: inline;) CSS tableless design is becoming a reality.
Thanks again and Death to Tables!
Ethan wrote:
Perfect! This simple css rule helped me greatly.
Ryan wrote:
I was able to solve my problems by doing the following…. EMAIL ME AND LET ME KNOW IF THIS HELPS YOU
..... (Notice the margin-left and the padding-left are different…)
UL{ FONT-SIZE: 12px; LIST-STYLE-TYPE: disc; FONT-FAMILY: Verdana,tahoma; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 5px; PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; }
LI{ FONT-SIZE: 12px; FONT-FAMILY: Verdana,tahoma; }