I've always heard and read that the zeroing of margin and padding on all elements in a page via css slows down browser rendering speeds because of all the extra style rules the engine has to apply to every single element. After a question came up on twitter about it, I couldn't think of or find any real numbers to validate that theory. So I decided to test it.

The Code

Here's the declaration I'm talking about:

* {
margin: 0;
padding: 0;
}

To put this in scope, all browsers have slightly different ways of applying default margin and padding to elements, so the idea is that to avoid dealing with these differences you just steamroll them down to nothing, building up from there, this is known as a "reset" and has always been fairly commonly used and accepted. The legendary Eric Meyer was one of the first to speak up about how this just wasn't acceptable in a number of ways and offered a better solution.

The Test

I used a css rendering benchmark tool created by nontroppo. It tests how long it takes a browser to render 2500 positioned divs. That is a LOT of elements, I would estimate a large sized page having at most a few hundred. Hopefully this will give us a wider degree of variation between the tests.

I ran two tests, one without the aforementioned declaration, one with. In each case I loaded the test, ran it a few times to be sure the rendering engine was warmed up (yes, as silly as it sounds they are affected by "cold starts"), then recorded the next 10 speeds averaging them out to produce the following results.

Results

As you can see, applying the reset was about 14.4 milliseconds slower to rendering the page.

Coincidentally that almost exactly the same amount of time it takes for a honey bee to flap it's wings 3 times. In more useable terms, it's in the ballpark of sending about .9kb of data across the internet on a high speed connection. If you're that concerned with time, there are far better optimization tactics to get those milliseconds back.

Is this test a definitive answer?

Pff, yeah right.

This test would have gotten me a "C-" in a 5th grade science fair. I only tested 10 times, on one browser, on a page with nothing but div elements. There are thousands of variables in the DOM alone that could potentially affect the speed tests, but I would say I generally got the numbers that I expected. Resetting in this fashion is slower, but nothing you would ever notice; even on a gigantic page.