What do margin:5px 0; and margin:5px 0 0; mean?

Question

Does margin:5px 0; mean margin:5px 0 0 0; or margin:5px 0 5px 0;?

Does margin:5px 0 0; mean margin:5px 0 0 0;?

Same for padding of course.

Also, is it consistent across all browsers (including IE6)?

Answer 1

According to Box Model:

• If there is only one value, it applies to all sides.
• If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second.
• If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
• If there are four values, they apply to the top, right, bottom, and left, respectively.

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

This is defined by the CSS standard, so it should be consistent across all browsers that implements CSS correctly. For browser compatibilities, check out blooberry's CSS Support History and quirksmode. According to blooberry, margin was first implemented in IE3, so IE6 should be fine.

Answer 2

For margin and padding, you can specify one, two, three, or four comma-separated values:

1. One value: All four sides use that value.
2. Two values: top/bottom get the first value; left/right get the second
3. Three values: top gets the first, left/right get the second, bottom gets the third
4. Four values: Top, right, bottom, left (i.e. clockwise from noon) get each value

Answer 3

margin: 5px 0; means margin: 5px 0 5px 0;

margin: 5px 0 0; means margin: 5px 0 0 0;

All browsers follow this, including IE 6.