1

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;
}
Dan
  • 55,715
  • 40
  • 116
  • 154
  • Not sure exactly what you're asking. The reset is just to restore a set of default values to a number of CSS properties so that you do not get unexpected results (like padding on an element when you did not specify padding). Are you asking why the font-size, font, vertical-align, and line-height are in his reset, specifically? – Logan Serman Oct 24 '11 at 19:33
  • I can see that my page layout changes when applying `line-height: 1;` but I can't understand what `line-height: 1;` exactly does – Dan Oct 24 '11 at 19:36
  • I see. Steve has a good answer below that explains these properties quite nicely. – Logan Serman Oct 24 '11 at 19:49
  • @Dan - Have you figured out how line-height works yet? I threw together a sample that illustrates how line-height effects element dimensions here in case it might help. http://jsfiddle.net/echopony/DXpHr/ – Steve Adams Oct 25 '11 at 01:38
  • Thanks, Steve!! I've figured out how `line-height` works. You have the great fiddle! I'll create one more fiddle to summarize the practice of adding reset: "what can happen if I add `body{line-height:1}` to my CSS?". – Dan Oct 25 '11 at 08:28

2 Answers2

9
*{
    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.

Steve Adams
  • 2,812
  • 22
  • 29
3

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.

Infeligo
  • 11,715
  • 8
  • 38
  • 50