Grow your CSS skills. Land your dream job.

Why or How does margin:0 auto; work?

  • # June 10, 2009 at 5:33 pm

    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?

    Rob
    # June 10, 2009 at 5:39 pm

    its the shorthand :)

    margin:0 auto; = the top and bottom margin 0, and the left and right margin auto :)

    # June 10, 2009 at 5:52 pm

    yeh. Margin shorthand:

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

    yes, right comes first weirdly.

    # June 10, 2009 at 5:54 pm
    "mattvot" wrote:
    yes, right comes first weirdly.

    Like a clock :D

    # June 10, 2009 at 5:58 pm

    Yeah it’s clockwise order. Why a CSS parser should work like a clock, on the otherhand, is a complete mystery.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".