What exactly does this mean? margin: 0px auto; I know that margin: 0px 0px 0px 0px; is top right bottom left BUT what does the above mean
This code should not be there very correct, but whether they are automatically adjusts the right ... For example if you have a div, 400px wide, and you have "auto" for the two sides, he should focus this div ...
It reduces to (tb) (rl), it goes something like t r b l (tb) (rl) t (rl) b Idea is if one # is missing, the other side is used. so on the last one values of 10px 20px 30px , gives top 10px, right 20px bottom 30px and the left takes 20px. Clear as mud right? here's the spec http://www.w3.org/TR/REC-CSS2/box.html#margin-properties
Here it is clearer: when you have 4 numbers, they refer to top, right, bottom and left sides in that order. I always forget which way it is with 3 numbers. I think it's top, sides and bottom in that order... When you have 2 numbers, the first refers to top-and-bottom, and the second refers to sides. Margin: 10px auto; means there are 10px margin on the top and the bottom of the element. Auto means that, so long as there's room, there is an equal amount of margin on each side. Margin: 0 auto is used to center block elements within their containers. It only works when they have a width set (otherwise the browser just defaults to 100% width). It does not work with inline elements such as text and images unless they are changed to display: block in the CSS. When you have 1 number, that amount is applied to all four sides: margin: 0; means all four sides are zero (no unit needed for zero). Less mud?
Instead of remembering the order, just think of a clock and the direction of the hand after :00. And horizontal auto margins will work on elements such as a table with no width set. Will also work on an image with no width set if display is set to block AFAIK.
The only reason it would work on the image with not set width is that after the browser downloads it, it can see what its width is (and IE sometimes f**s up with this as it begins rendering the rest of the page sometimes and the last thing it knows are the dimensions of the image... and doesn't re-render the page to make room so now you've got this image half-covering something else). For this reason I've started always listing width and height in the HTML instead of the CSS because apparently this retarded problem can occur even with the width in the CSS (I forget who I heard this from; I haven't see that first-hand). Tables continue to surprise me, as I still really don't know a lot about them. It's possible that if everything within the table is loaded first, the browser can make a pretty good guess how wide the whole thing is before placing it?