treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Why or How does margin:0 auto; work?

  • In many of Chris' videos the margin:0 auto; statement is referred to as a "Trick". So I went off on a search to find out why this "Trick" works. Looking at http://www.w3schools.com/CSS/css_margin.asp I see that auto simply means let the browser set the margin. But I don't understand why the preceeding 0 is required.

    I know that margin:0 simply means set all 4 sides to 0. But what does it mean when you put a space between 0 and auto?
  • its the shorthand :)

    margin:0 auto; = the top and bottom margin 0, and the left and right margin auto :)
  • yeh. Margin shorthand:

    margin: ALL;
    margin: TOPANDBOTTOM LEFTANDRIGHT;
    margin: TOP LEFTANDRIGHT BOTTOM;
    margin: TOP RIGHT BOTTOM LEFT;

    yes, right comes first weirdly.
  • "mattvot" said:
    yes, right comes first weirdly.

    Like a clock :D
  • Yeah it's clockwise order. Why a CSS parser should work like a clock, on the otherhand, is a complete mystery.