What does * {margin:0; padding:0} solve?

I’ve always disliked reset stylesheets. They are often overkill – making the webpage look like plain text, they slow down the loading of the page and overall simply reset too much.

Now while many other professional developers agree with the above sentiment, there seems to be a consensus that you need some kind of minimum reset stylesheet, that contains at least

*{margin:0; padding:0}

and I can’t help but wonder why.. What does this solve? What are the cross-browser compatibility issues that need this for a solution?

This makes paragraphs lose their margins, unless you add those back in. And it isn’t necessary in the first place, because all browsers use the same margin for paragraphs, without exception. You don’t iron out any differences using this. Ditto for headers. And it ruins lists, squishes tables, wrecks forms and inputs, etc. Unless you add the margins and the paddings back in, effectively undoing the damage you did.

So why use it in the first place? What is it good for?

Advertisement

html {font-size:62.5%} is a mistake

If you find yourself using html{font-size:62.5%} in your stylesheet, ask yourself why you are doing it.

You may argue that font sizes of 10px are easier to calculate with than font sizes of 16px. But you’d forget a few things.
Firstly, 62.5% of the user’s preferred font size is not 10px. Well, it might be, if the user’s preferred size is 16px, but then again, it might not be!
If you want the root font size to be 10px, then why don’t you make it 10px? Why don’t you write html{font-size:10px}? Tell me that.
You may say that if you use a percentage, you’re still respecting the user’s preferences: no matter what default font size they have, 1.6rem will still be their original. But that isn’t always true; it depends on many different factors.
Let’s say you have a line of text like <p style="font-size: 1.6rem"> This is the user's preferred size! </p> and the user has set a preferred font size of 15px. Then this line can come out at the following sizes:

• 15px if you’re lucky
• 14px if the browser rounds all sizes to whole pixels, so 62.5% of 15 becomes 9 and 1.6 times 9 becomes 14.
• 9px if the browser doesn’t support rem. The p’s style attribute will be ignored.
• 12px if the browser doesn’t support rem and the minimum font size is 12px.
• 19px if the minimum size is 12px and the browser has corrected the root font size to this minimum size (that is, 1rem is now 12px).

(The last example might sound contrived, but let me tell you that one of the major browsers does indeed treat its sizes that way. Test thoroughly!)

And what about zooming in and out? If a user has their minimum font size at half the default font size, they can zoom out to 50% before those sizes start interfering. With your setup, they can only zoom out to 80% before running into issues. So test that too!

Secondly, even disregarding your flawed assumption about every user having 16px for a default, why do you want to make calculations with the font size? And why do you think it’s easier after html{font-size:62.5%}? If you want some header to be 24px, you can just write 24px. There is no need to change the html font size first and then write 2.4rem.
Also, if you hadn’t changed the html font size, you could have written 1.5rem. Why would 1.5rem be more difficult to work with than 2.4rem? In fact, not changing the html and writing 1.5rem will make it clearer that this is one and a half times the standard size. Much more intuitive.

Speaking of intuitive, you’re also messing with the predefined font sizes xx-small, x-small, small, medium, large, x-large and xx-large. After this treatment. these keywords don’t work as they should any more; small wil be larger than 1rem!

Now some people believe that if you use pixels, users will not be able to zoom in and out on their webpages. This isn’t true.

Oh, and I know there is a misconception about using pixels. Pixels are not good, because not all pixels are the same size. Well, let me tell you, not all percentages are the same size either! How about that.

And some people believe that you need to set a font size on the html, for whatever reason. That if you don’t, some things won’t work correctly. So they do html{font-size:100%} and think that they are doing the right thing. I am not sure where this misconception comes from.