Box model resetting defaults

In this section(https://www.codecademy.com/programs/dd8b30c52fdf0af5fd24cfe2ad58746b/content-items/9ddcdb4f060404820cf7ef57cc31db23/exercises/resetting-defaults) in css box- model course about “Resetting Defaults” it prompts you to " In style.css , reset the default margin and padding values for the body. What happens to the web page in the browser?"

well what does happen? i couldnt tell

1 Like
body {
  background-color: #FFF;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

Visually, it does nothing.
edit: for me, it actually removes a “white border ish thing” around the whole thing, if I look closely :sweat_smile:

Under the hood: in this example it takes the values for margin and padding and (re)sets them to 0 on the body selector, picking the body will make sure every element that is inside of the body and uses a margin or padding will be reset to 0 first, then use whatever you told them to. (I might have gotten that wrong, maybe that’s what the * selector does…)

Every code that now follows will change the margin and padding based on 0.

Why do this? Like stated in the exercise, there’s a user agent stylesheet, that’s simply the standard CSS for unchanged CSS selectors your browser will apply whenever your CSS doesn’t change the selector in question.

Imagine, those CSS values you don’t touch will be at the standard value of your preview browser when styling your website, and you think they fit. Now imagine a user browsing your site using a completely different browser that uses different standard values… it might look completely different - and CSS is just for avoiding that.

Especially for developers, resetting defaults in your CSS first, then styling your webpage is very much recommended.

There are CSS reset sheets online that can be used to reset pretty much every possible CSS selector.