CSS padding
- Thread starter Nate
- Start date
The 'universal reset' (or anything else you might like to call it) is what most people use and the one 'special' rule I see appearing most frequently. You simply reset margins and padding on all elements to 0. This means you have to explicitly set any margins or padding for it to be applied, giving you fine grain control over your layout and removing the need for per-browser adjustments. All browsers will have the same margin/padding values i.e. 10px is 10px in IE or Firefox.
It can take a little getting used to, as it means that elements like lists lose their nice indenting and so on.
The addition of body and html is to ensure browser who don't consider those elements to come under * apply the rule.
There are various base stylesheets flying about where people have just adjusted margins/padding to equalise between browsers - a slightly less of a sledgehammer method, but not quite as concise.
/edit - when you say "how they interpret padding" - are you talking about the box-model here, or the fact that elements have different amounts of padding in each browser?
It can take a little getting used to, as it means that elements like lists lose their nice indenting and so on.
Code:
*, body, html {
margin:0;
padding:0;}There are various base stylesheets flying about where people have just adjusted margins/padding to equalise between browsers - a slightly less of a sledgehammer method, but not quite as concise.
/edit - when you say "how they interpret padding" - are you talking about the box-model here, or the fact that elements have different amounts of padding in each browser?
For the box-mode, first mnake sure your document is rendering in standards mode in IE6. Then there will be no box-model issue in IE6. There's a handy table showing which doctype triggers which mode i.e. always go for a Strict doctype.
If you still need to support IE5, then I would say that most people use the Simple Box-Model Hack (SBMH), where you use backslash escapes on property characters to serve rules only to IE5 followed by the the Modified-SMBH which uses the * html hack instead. Other than that, Tantek Celik's hack is popular, but I personally don't see it much. When I was supporting IE5, I just used the regular SBMH as it made the most sense to me.
If you still need to support IE5, then I would say that most people use the Simple Box-Model Hack (SBMH), where you use backslash escapes on property characters to serve rules only to IE5 followed by the the Modified-SMBH which uses the * html hack instead. Other than that, Tantek Celik's hack is popular, but I personally don't see it much. When I was supporting IE5, I just used the regular SBMH as it made the most sense to me.