Question

I know I can declare margin for top then bottom like this;

  margin: 10px 6px;

I know for all the same;

 margin: 10px;

I know for all individual;

 margin: 0 8px 9px 1px;

But on some sites I have seen examples such as;

 margin: 2px 2px 0;

and

 margin: 0 8px 2px;

Anyone care to explain how this works??

Answer 1

The margin and padding are defined in this order:

• T – top
• R – Right
• B – Bottom
• L – Left

Short-hands:

margin: a;      /*= a a a a*/
margin: a b;    /*= a b a b*/
margin: a b c;  /*= a b c b*/
margin: a b c d;/*= a b c d*/
/*Where a, b, c and d are values. Valid values consists of at least one digit
 * and a unit, e.g.: 12px. 0 (zero) doesn't require a unit */