Margin, padding... I HATE it when firebug shows only THREE values

HTML & CSS
1

please, when you see only three values for margin and padding in firebug, what are the values?

why can’t Firebug and the Chrome thing show FOUR values?

this always confuses me, I never know what the values represent when they show only three values…

it makes NO SENSE to me to show only three values…:frowning:

so: if it only shows three values for margin, for example

margin: 0 auto 6em;

what values are those exactly??? this really irritates me…

thank you…

2

margin: 0 auto 6em; is shorthand for:

margin-top: 0px;
margin-right: auto;
margin-bottom: 6em;
margin-left: auto;

This article explains the shorthand version quite well.
The bit you want to read is entitled “The margin and padding shorthand properties”

Hope that helps.

3

The basic rules are:

  • If there is one, it applies to all four sides. These are the same
    [LIST]
  • margin: 1px;
  • margin: 1px 1px 1px 1px;
  • margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;
    [/LIST]
  • If there are two, the first applies to top and bottom, the second to left and right. These are the same
    [LIST]
  • margin: 2px 1px;
  • margin: 2px 1px 2px 1px;
  • margin-top: 2px; margin-right: 1px; margin-bottom: 2px; margin-left: 1px;
    [/LIST]
  • If there are three, the first applies to top, the second to left and right, the third to the bottom. These are all the same
    [LIST]
  • margin: 1px 2px 3px;
  • margin: 1px 2px 3px 2px;
  • margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 3px;
    [/LIST]
  • If there are four, the first applies to top, the second to right, the third to bottom, the fourth to the left. These are the same
    [LIST]
  • margin: 1px 2px 3px 4px;
  • margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;
    [/LIST]
Edit:

beaten - ugh

4

Sorry dude!
Your explanation was way better, though :slight_smile: