Please explain me Eric Meyer's CSS reset

Question

First of all I want to tell you why I'm asking this question. I usually update projects that have been written poorly and without a reset. I want to improve the project's quality so it seems that applying a CSS reset is absolutely necessary.

I don't want to do a hard work of pixel perfect testing in every browser every time I change something and I don't want to completely rewrite all CSS.

So:

When I'm writing:

*{
    margin:0; 
    padding:0;
    border:0;
}

I know what trouble to expect: <p> will loose padding and <input>, <select>, etc. will loose padding and border. So I have to specify them manually.

This code is more difficult to understand:

*{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

And I'm completely confused with this:

body {
    line-height: 1;
}

Answer 1

*{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

This sets all elements in the document to inherit font and font-size from parent elements by default unless specified otherwise, which can prevent user-agent stylesheets from applying font styles with less specific rules.

vertical-align: baseline; is another widespread rule to avoid user-agent rules which don't always apply this (I believe) expected default behaviour to all elements.

Here's a brief look at what this does: demo. In the demo, try setting a rule to middle rather than text-top.

body {
    line-height: 1;
}

This is the same. If you're not familiar with line-height, it's quite simple. You may have dealt with it without realizing it: Sometimes it appears to be a margin issue when in fact, the line height of an element is exceeding what you expected. This often happens when you place a typeface into a design which has a very dissimilar x-height to other typefaces.

If you don't understand its function, throw some dummy text into a document and start playing with it. It's very useful (essential) for producing good typography in different situations.

It seems you're not clear on css attributes and how they effect elements. The better your understand this, the better you can utilize a reset. No reset really fits all for a few reasons. For example, you might not be using any elements where vertical-align may end up being mismatched. You may have rules in a large reset that apply to elements you don't even have.

As with anything in web design, if you don't understand it, hands on experience will teach you a lot.

Answer 2

Check out this fiddle with simple input control on a form:

http://jsfiddle.net/KXYHw/

Toggle reset and see how input font and font size changes.