March 12th, 2007 - by Paul OB

How many times have you heard someone say: “Why does my site look different in IE than in Firefox”?

This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers.

Margins and Padding

One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.

For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other

The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.

In some designs this may not be a problem but in cases where position is important, such as aligning with other elements on the page, then the design may look bad or at least not as expected.

Here are some styles taken from the default Firefox 2.0 stylesheet (html/css) and immediately shows what is going on here:

  1. body {
  2. display: block;
  3. margin: 8px;
  4. }
  6. p, dl {
  7. display: block;
  8. margin: 1em 0;
  9. }
  10. h1 {
  11. display: block;
  12. font-size: 2em;
  13. font-weight: bold;
  14. margin: .67em 0;
  15. }
  17. h2 {
  18. display: block;
  19. font-size: 1.5em;
  20. font-weight: bold;
  21. margin: .83em 0;
  22. }
  24. h3 {
  25. display: block;
  26. font-size: 1.17em;
  27. font-weight: bold;
  28. margin: 1em 0;
  29. }
  31. h4 {
  32. display: block;
  33. font-weight: bold;
  34. margin: 1.33em 0;
  35. }
  37. h5 {
  38. display: block;
  39. font-size: 0.83em;
  40. font-weight: bold;
  41. margin: 1.67em 0;
  42. }
  44. h6 {
  45. display: block;
  46. font-size: 0.67em;
  47. font-weight: bold;
  48. margin: 2.33em 0;
  49. }

As you can clearly see there are various properties that have been set but the most important are the margins and padding as they vary considerably. If you were to look at the default IE stylesheet you would find that there would indeed be few styles that were the same as the above.

What Can Be Done

Since we can never be sure whether the browser’s stylesheet has applied margin or padding to an element the only real option is to explicitly set the margins and padding ourselves. This way we can over-ride the default stylesheet so that we know exactly how each element will behave in each browser.

As we don’t really know what elements have default styling applied to them (across all browsers) we must set the margin and padding for every element we use. In most cases we are just talking about block level elements — you do not need to do this for inline elements such as em, strong, a, etc which seldom have any margin or padding applied to them. Although em and strong will have some styling already applied to them to give them their strong and emphasized look.

Here is how you can reset the padding and margin of block elements when you use them:

  1. html,body{margin:0;padding:0}
  2. p {margin:0 0 1em 0;padding:0}
  3. h1{margin:0 0 .7em 0;padding:0}
  4. form {margin:0;padding:0}

Take the body element for example, and notice that we have included the html element also, and then we have re-set padding and margins to zero. As explained above, various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.

If you did not reset the margins or padding and you simply defined something like this:

  1. body{margin:1em}

Then in Opera you would now have the default padding on the body plus the extra margin you just defined there by doubling the initial space around the body in error.

Also be wary of doing things like this:

  1. html,body {margin:0;padding:1em}

You have now defined 1em padding on the html element and 1em padding on the body element giving you 2em padding overall which probably was not what you intended.

Global White Space Reset

These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.

  1. * {margin:0;padding:0}

The universal selector (the asterisk *) matches any element at all and to turn all elements blue we could do something like this:

  1. * {color:blue}

(Of course they would only be blue as long as they have not been over-ridden by more specific styles later on in the stylesheet.)

The global reset is a neat little trick that saves you having to remember to reset every element you use and you can be sure that all browsers are now starting on even footing.

Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go. As with the problems already mentioned we also need to cater for some browsers that don’t use left margin but use left padding instead.

This can be quite a big issue if, for instance, you have not reset the default padding and margin to zero and try something like this.

  1. ul {padding:1em}

In browsers that have a default margin applied you will now get the default left margin of 16px (approx) and a default padding of 1em, giving you approximately twice the amount of space on the left side of the list. This would, of course, make the design look quite different in the various browsers and not something you would wish to do.

In essence the margin should have been reset to zero, either initially with the global reset, or by simply doing the following:

  1. ul {margin:0;padding:1em}

Now all browsers will display the same, but you will need to ensure that the 1em is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)


However, as with all things that make life easier there is a price to be paid.

First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will its “depressed when clicked effect” and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.

You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so

Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.

There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.

You can’t add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn’t work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.

Here is an image showing the problems in Firefox and Opera:

Select element in Firefox and Opera

There is no easy fix — it’s something you have to live with if you use the global reset method.

If you do not have any forms in your site (unlikely) then you don’t have to worry about these issues or you can simply choose to ignore them if you think your forms are still accessible and don’t look too bad. This will vary depending on the complexity of your form design and is something you will need to design for yourself. If you are careful with the amount of padding you add then you can get away with a passable design that doesn’t look too bad cross-browser.

Another perceived drawback, of which there has been a lot of discussion, is whether the global reset method could have speed implications on the browsers rendering of the page. As the universal selector applies to every single element on the page, including elements that don’t really need it, it has been put forward that this could slow the browser down in cases where the html is very long and there are many nodes for the parser to travel.

While I agree with this logic and accept that this may be true I have yet to encounter an occasion where this has been an issue. Even if it were an issue I doubt very much that in the normal scheme of things it would even be noticeable but of course is still something to be aware of and to look out for.

The final drawback of using the global reset method is that it is like taking a hammer to your layout when a screwdriver would have been better. As I have noted above there is no need to reset things like em, b , i, a, strong etc anyway and perhaps it’s just as easy to set the margins and padding as you go.

As an example of what I mean take this code.

  1. * {margin:0;padding:0}
  2. p,ol,ul,h1,h2,h3,h4,h5,h5,h6 {margin:0 0 1em 0}

I have negated the padding on all elements and then given a few defaults for the most popular elements that I am going to use. However, when coding the page, I get to the content section and decide I need some different margins so I define the following:

  1. #content p {margin-top:.5em}

So now I have a situation where I have addressed that element three times already. If I hadn’t used the global reset or the default common styling as shown above then I could simply have said:

#content p {margin:.5em 0 1em 0;padding:0}

This way I have addressed the element only once and avoided all issues related to the global reset method. It is likely that you will apply alternate styling to all the elements that you use on the page anyway and therefore you simply need to remember to define the padding and margin as you go.

  1. form{width:300px;margin:0;padding;0}
  2. h1{color:red;background:white;margin:1em; padding:2px;}


The safest method is simply to define the margins and padding as you go because nine times out of ten you will be changing something on these elements and more than likely, it will involve the padding and margins. This saves duplication and also solves all the issue that the global reset may have.

The global reset is useful for beginners who don’t understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.

In the end it’s a matter of choice and of consistency. Whatever method you use make sure you are consistent and logical and you won’t go wrong. It is up to the designer to take control of the page and explicitly control every element that is used. Do not let the browser’s defaults get in your way and be aware that elements can have different amounts of padding and margin as determined by the browser’s own default stylesheet. It is your job to control this explicitly.

95 Responses to “No Margin For Error”

[…] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this […]

[…] Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? […]

3 timethief

Hi there,
Thanks for all the work that went into this article. The explanation was very clear and detailed. I appreciate that because it was exactly what I was looking for.
Happy blogging 🙂

4 Paul OB

@timethief – Thanks 🙂 Glad it was of some use.

5 Ashish Jha

article was informative.cleared few of my i know why some readymade style sheets have * {margin:0;padding:0} .but with this code in css files,w3 validator won’t validte my css file. is validationof any use as far as css is concerned.
Also please tell me which is a better way 1)a single global big css file or 2) small css files for every browser.

6 Paul OB

@Ashish:”* {margin:0;padding:0} .but with this code in css files,w3 validator won’t validte my css file. ”

Hi Ashish,

I think you are confused because * {margin:0;padding:0} is 100% valid and passes validation without error. The universal selector (the asterisk (*)) is a valid selector. (You may be confusing it with * html but that is also valid even though it is a hack.)

You should always validate your css file because at the very least it will pick up typos and silly omissions such as missing semi colons or brackets. IE is the only browser that you really need a hack for and in most cases you should use hacks that validate anyway. If you are using a non-validating IE hack then put it in an IE only conditional comment css file so that the main styles sheet isn’t polluted

Re your questions 1 and 2 there is no easy answer as it all depends on the site in question and the size of the css files.

If you are talking about hacks then the safest way is to use conditional comments to supply IE the hacks that it needs. However these files should be very small because even on large sites you only need a few hacks at most. Don’t include a whole separate stylesheet for each version on IE as that is a waste of bandwidth and will make maintenance harder.

If you weren’t meaning hacks and just talking about multiple stylesheets then that all depends on the site in question. If you have a very large site with many different sections then there is no point in putting all the css in one file and forcing the visitor to load the css for all 1000 pages when they are only visiting one.

In these cases you should split the files into logical sections with a few common css files that can be used on all pages. You then separate the rest of the css into logical sections containing the unique elements for those sections. Many large sites may have up to 30 different css files although at any one time they probably won’t link to more than five at a time.

If its a small site then one css file will probably be good enough.

7 Horizontal Menu Using Lists Problem

[…] Horizontal Menu Using Lists Problem That’s not really the best solution. No Margin For Error __________________ Go Pink for October – Go Pink in Support of Breast Cancer Awareness [a web […]

[…] the universal selector using this mean to apply the properties to ALL elements. Read this article – No Margin For Error __________________ [a web design portfolio – Currently AVAILABLE for work | web design | […]

9 Learning CSS

[…] Margin Issues – Margins are a pain. […]

10 Which Browser and Version « wpbloggingtips

[…] CSS Tip: Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? […]

[…] very thorough article about why browsers render HTML more | digg story Share This Related post: Annual St. George marathon set for Saturday; 6,800 runners […]

12 Tobey

Very useful information. You really hit a problem that many site-owners suffer from. Thanks a lot for shring!

Cheers –

13 güzellik

The best of it is that it is gauranteed by Yahoo web team and lots of other web site developers.

14 Which Browser and Version « one cool site

[…] CSS Tip: Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? […]

15 healthsearchonline

I used your global reset to see if it was something that ie did. Nothing changed, so I knew the css sheet had to contain a very wrong number somewhere.

16 fitness

Thanks for all the work that went into this article.

17 bodrum hotels

thank you. If its a small site then one css file will probably be good enough.

18 Jazztrio Jazz Supply

Thanks for the article cleared up some things (well mostly margin issues actually) that I had to mess around with alot when re-writing our webpage using css.


19 Sam

This article helped me after hours of searching the web, I found this and it helped a bunch.


20 Beeson

Thank you so much, now my web site is IE and Firefox friendly. Awesome to have come across this web site.

21 Gaurav_M

Thanks man…Now at least i will learn to tame cross browsers compatibility..Thanks for wonderful share

[…] for more help with cross-browser CSS read this […]

23 nemu

hi paul. thanks so much for this article. it’s very helpful. 🙂

24 Me

Thanks so much for this! I googled across this after getting frustrated with the margin difference between Firefox and IE. This is really helpful. I’ll go back and change some margins in the morning. For now bedtime!

Great article!

25 Hardeep

I’ve been completely stumped as to why my site was appearing differently in IE7 compared to Firefox. This has helped clear that up (hopefully it will sort it out).

Thanks a bunch!!

26 Steve

This is an old article but it helped me get everything looking almost the same in the big 4 browsers. Thanks!

27 Doug C.

Mr. O’Brien, I take my hat off to you, sir. After weeks of fumbling around the Web trying to find the codes to properly align the content on my blog I found this. Bookmarked, Dugg, and shared.


[…] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this […]

29 Elmer

Nowhere else had I read about browsers plugging in their own default stylesheets, yet this simple concept is key to understanding why they behave differently. Thank you very much for your great explanation. It will help me a lot!


30 Neichelle

This made my day, it’s cleared up a bunch of issues for me. Thanks you so much for this!

31 Swallow my design » Hello world!

[…] This is covered in depth in this article “No Margin For Error”. […]

[…] This is covered in depth in this article “No Margin For Error”. […]

33 sriraj


I am new to css i got a task that text scrolling is working in FF but not in IE6 & IE7 can u please tell me where I have to make changes .and also in iE6 shading coming around the images but its working good in FF and IE7.Please clarify these two issues.


34 Paul OB

Hi Sriraj,

You should seek help in the sitepoint forums:

The posts here are only concerned with discussing the techniques in the article.

35 sandrar

Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

36 Nemanja

Paul, thank you very, very much, this article made all the difference in the world to me today! Brilliant.

37 Sylwester w Górach

Preety good article i eaven use some of it to make my web sites better.

Thak You

[…] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this […]

39 If you have forms on your site…

[…] .. read this basic css margin article – it covers some form specific details that are excellent. read me […]

[…] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this […]

41 Kris

Almost four years, and a couple of versions of IE, later and this article is still as relevant as when it was first written. I stupidly viewed a recent web project in IE, only to discover rendering ‘issues’ in Firefox, Opera and Chrome. The actual ‘issue’ lies with Internet Explorer of course, which does indeed suck in a rather large fashion. I can’t believe that there isn’t some sort of industry standard for all browsers – why should web designers have to worry about cross-browser compatibility, when Microsoft could simply comply with the rest of the rational world?

Not does IE cause layout issues, it takes the longest time to download (about 3 times longer than FF, Chrome or Opera), tries to force a pile of crappy unwanted add-ons onto the user (instead of letting you choose your add-ons later) and guess what happened the first time I ran IE8?…

…”Internet Explorer has encountered an error, and needs to close”…

…different day, same old Microsoft. I couldn’t understand how people could use anything other than IE up until I started designing websites a couple of years back – now I’ve went from being Microsoft’s biggest fan to one of their (many) critics.

Great article by the way. I wish I had read it before getting stressed out by margins etc.

42 Kars

Hi Kris, so true what you’re telling. Hate MSIE!

43 MiB

Paul, beside your observations on form elements I find both your prerequisites and conclusions quite odd.

Why would anyone use the global * when they can reset margins and paddings on the elements they use with a multiple selector?
The solution aren’t catch-all solutions instead of real knowledge, but proper knowledge and a detailed systematic approach to using css.designs.
I got inspiration for my personal system from Michael Bowers 2007 book “Pro CSS and HTML Design Patterns” on apress (1-59059-804-0).

44 Paul OB

@MiB: Thanks for your comments.

Re:”I find both your prerequisites and conclusions quite odd. ”

You’ll need to make specific points and detail your reasons if you want a proper discussion on this matter as saying “it’s quite odd” is in itself….. a little odd.:)

RE:”Why would anyone use the global * when they can reset margins and paddings on the elements they use with a multiple selector?”

I’m not quite sure what you are getting at but people would use *{margin:0;padding:0} instead of the mile long reset ( because it is easier to implement and easier to remember.

However, as I have mentioned in the article it’s not my preferred method (these days I prefer a very small reset and then just reset things as I use them).

Re:”The solution aren’t catch-all solutions instead of real knowledge, but proper knowledge and a detailed systematic approach to using css.designs.”

I believe that’s basically what I was saying from the start and the article was about explicitly controlling the elements that you use and raising awareness of the implications that arise from styles applied via the UAs stylesheet.

The article is over 4 years old now but still stands up quite well to scrutiny and is just as pertinent today as it ever was.

45 The History of CSS Resets | WordPress Crunch

[…] are hyperlinks (<a>), images (<img>), headings (<h1> through <h6>), and the margins and padding given to various […]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Other Sites