Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Erickson
Full Stack JavaScript Techdegree Student 3,916 PointsMargin/Padding set to 0
Good afternoon Treehouse Community. I have a general question that I'm hoping to get some feedback. So, I'm somewhat new to code. I'm going through the CSS Basics/Intro to Selectors and see the instructor applied padding/margins to 0 for the universal selector. I've seen a number of other designers do this. Is this recommended? I know it comes down to personal preference, however I wanted to get opinion/feedback from others with experience; think of it as best practice for a new designer.
4 Answers
Erik Nuber
20,629 PointsYes, the normalize file will be put on all of your pages unless you are just fiddling around but even then I'd still use it for consistency.
I also found this answer on stackoverflow which does a good job explaining reset vs normalize
The major difference is that:
CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You're then supposed to add all decoration yourself.
Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.
If your design a) follows common conventions for typography et cetera, and b) Normalize.css works for your target audience, then using Normalize.CSS instead of a CSS reset will make your own CSS smaller and faster to write.
Mary-Ann Burton
15,834 PointsI think it really comes down to the project - if you are going to be using a reset stylesheet in your code, such as normalize.css or reset.css, then these will already be taken care of and you don't have to include them.
However, if you are NOT including a reset stylesheet, you would want to reset all padding/margins for your page, and as you get more specific in your code selectors you can override the margins and padding to the widths you would prefer for each case.
Hope this helps! :)
John Erickson
Full Stack JavaScript Techdegree Student 3,916 PointsThanks Mary-Ann...Do you normally get your normalize css from:
https://necolas.github.io/normalize.css/
I would imagine then it would be best practice to place this before my specific stylesheet, correct? Also, so the normalize will remove all padding/margins, so that everything starts at 0, right?
Thanks again, I very much appreciate your feedback.
Erik Nuber
20,629 PointsThe reason they do this is to normalize all margin/padding styles. This gives a starting point so that when you want to change the margins/paddings on various items, you know they always will start with a zero value. As you move further into the lessons, they will introduce you to a "normalize" file that will already have this set for you. So you won't be doing it every single time. It is an external css sheet that you use on all of your files so you won't have to do this every single time.
John Erickson
Full Stack JavaScript Techdegree Student 3,916 PointsThanks Erik for the feedback. This makes much more sense now. I started placing the normalize.css file prior to my specific stylesheet, but I didn't know that part of it was to remove the padding/margin. As I mentioned to Mary-Ann, I would imagine it best practice to place the normalize stylesheet in every project, correct? Thanks again!
M W
3,446 PointsThere is a really useful article here http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/ including various reset codes...they include text within the CSS so you know if you require each part or whether it can be deleted from the css. Hope that helps :)
John Erickson
Full Stack JavaScript Techdegree Student 3,916 PointsThanks Mat! I apologize for the delay in my response. I've been knee deep trying to understand JavaScript before starting a web development bootcamp. Nothing like trying to learn 3 different forms of syntax at the same time, LOL! Regardless, thank you!