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

CSS

Sara Mørk
seal-mask
.a{fill-rule:evenodd;}techdegree
Sara Mørk
Full Stack JavaScript Techdegree Student 2,838 Points

Is there anything wrong with * { margin: 0 auto; } ?

Early on in my learning, I used the following trick to get rid of a strange "border" pushing my elements a tad lower and to the right.

As I'm starting to code more serious projects, I remembered someone telling me that was bad practice. Their answer was a bit too complicated for me to grasp in one go- so unfortunately I cannot remember what is wrong;

* { margin: 0 auto; }

2 Answers

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Hey friend , at first you should be clear about 'What you want to achieve?' .
Next , you should know , what will this code do. Now ,

* { margin: 0 auto; }

This code will set the reset the margin property of each element and set margin-top property of each element to 0 . And will set the left and right margin automatically to center the element horizontally.
This method is a bad practice because it may remove a good default styles for some elements.

Now , why should you not use margin: 0 auto in universal selector ?
It is a bad practive because , some elements have pre-defined paddings and margins . So this will set them to 0. So , in order to give them margin , you have to set that again . So , why to write code twice .
There is a better practice and that is to to include normalize.css file . It has its own set of rules and it will not set margin of all the elements to 0 . It has defined margin to those element who needed it and removed for those who doesn't .
You can use margin: 0 auto for centering a single block level element . Infact it's one of the most used technique to center a div .
Hope it helps :)

David Perkins
David Perkins
9,607 Points

There's nothing "wrong" with what you're doing, it's just not the "done thing".

There are a few different ways you could potentially alleviate having to use a wildcard selector like that. One is by using something like Normalize or Eric Meyer's Reset CSS or any of the other reset frameworks that are knocking around. These will generally help to try and make all browsers respond in a relatively similar fashion when it comes to the barebones styling foundation you'll be using when you start to style up a page.

The second reason it's not the best practice is that you're basically setting a rule to run on EVERY element that you put in the structure of your site. Now, something like this could be usable in very specific or one-off cases but I'm pretty certain you'll have other margin rules on a specific class or id selectors further into your stylesheet. This means that you're effectively overwriting your wildcard/catch-all rule pretty much instantly and as such, immediately disregarding the rule you've just declared.

Finally, you should look into the potential reason why you're needing to use the wildcard/catch-all approach as there could be something missing or not sitting correctly in the structure of the page you're styling up. Most of the time, you can fix the need to have a wildcard selector by taking advantage of the methods that I've listed above.

I hope that helps and I apologise for the long-winded response.