Are margin and padding values the only ones that need reset?

Question

Do I only need to reset margin and padding values to not be affected by the user agent stylesheets?

Answer

resetting margin and padding values either with the universal selector (*) or the body selector is the most common and minimalist reset. Most often for simple pages, it will work perfectly, so it can be the only properties that we may need to reset, but they might not be the only properties that we might want to reset.
For example: in Internet Explorer, buttons and inputs have a default overflow value of hidden, but it is valuable to set it as visible and be able to address the overflow as we see it fit. Another example can be buttons, inputs, and textareas have different font styles on each browser. Giving them an inherit value to their font-family property and a 100% value to their font-size will equalize a base to implement our planned styles in those elements without differences provided by each user agent.

Presently, there are many ready-made reset CSS files out there, all worth exploring, but most often than not, when we are still learning… this:


 margin: 0;
  padding: 0;

either for the body or * selector, is more than enough reset.

28 Likes

If I want to reset everything in the <body> tag, couldn’t I just do like this:

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

1 Like
  • {
    margin: 0;
    padding: 0;
    }

The star in the code implies all HTML elements including the body.

body {
margin: 0;
padding: 0;
}
In this case however the CSS rules are to be applied to the body element only.

We use nested selectors to be more specific. For instance if we write

div p{

}

this implies the paragraph is a child of the div element. The nested selector in this case is equivalent to saying all the paragraphs in the div element.

But in your code the body is trying to nest all HTML elements. This does not make sense since the body is a child of * (all HTML elements).

1 Like

when we reset the user agent default values with the body selector. it doesn’t reset the classes or ids. how is that useful?

How is it useful to reset something one could have no idea of existing?

The only reason reset.css is useful is because it allows a lot of plug-ins and polyfills to play well together. It is not a magic bullet that we always need to apply. Personally, I’d rather dial in my CSS to override default styles as apply, without a blanket approach. It uses so much less resources and it’s pretty easy to follow along without making any assumptions.

An alternative approach to resetting CSS styles, is to normalize them (see, e.g., https://necolas.github.io/normalize.css/). The idea of normalizing is that one doesn’t throw out all the default styling performed by browsers – as the default styling (apparently) can be quite useful. One only changes those default properties that differ among browsers.

Looking at the normalization stylesheet at https://necolas.github.io/normalize.css/8.0.1/normalize.css, one, for example, sees that the body margin is reset, but the padding is not. Apparently, the browsers that were considered when creating this normalization stylesheet do already automatically set the padding of the body element to zero.

1 Like