How to normalize padding and margins across browsers

Asked 7/8, 2010 at 23:33 Answered 7/8, 2010 at 23:45

How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.

It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?

Update

It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.

I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.

Pokelogan answered 7/8, 2010 at 23:33 Comment(0)

This is usually solved with a CSS reset but not all of them are complete. On some browsers, the overall body has to have its border set to 0 (i.e. Opera and sometimes IE) to be truly the same. Try the following:

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

Since you don't say which element or give a link I can't really go too far into this. Which elements are you having trouble with?

Ity answered 7/8, 2010 at 23:39 Comment(1)

The problem is when you set paddings or margins to 0px the browser overrides some of these elements with a default value. It goes somethng like if(padding = 0px) padding = 2px or something stupid like that which is making it near impossible to get a consistent layout without maintaining multiple style sheets. – Pokelogan 8/8, 2010 at 20:12

Its not worth the extra CSS interactions and extra code to add a complete set of "normalizing" padding or margin elements.

Its best to style for what you need by explicitly stating the padding and margin for the elements you are using on your pages.

Continue answered 7/8, 2010 at 23:41 Comment(0)

Paddings are usually 0 everywhere. It are the margins which are the most disbalanced among browsers. Just define your own margins on HTML block elements. A CSS reset is like a sledgehammer. You'd need to redefine more than only margins. But it may be helpful for beginners since they often can't at first glance distinguish between default inline and block elements in HTML. A CSS reset would force them to redefine the one and other "the right way".

Related questions:

See also:

Recommended topics

Hot tags