{Carrer web log}

CSS Shorthand Clockwise Rule

Tuesday, January 26, 2010 { 23 Comments }

When I started with CSS one of the most confusing thing was the shorthand rule. For example:

margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;

Also can be margin: 1px 1px 1px 1px ;

Which is which?

If I remember correctly I watched some videos on Lynda.com for CSS, that I heard about the Clockwise Rule end everything was much more clear.

Basically the first is the top margin and everything is going Clockwise right, bottom and left.

I know that many of you are familiar with this rule but also many others are starting with CSS so I hope this can be helpful.

I design this clock only thing to do is match the colors.

We have 4 parameters it starts from 12 o'clock or top-margin and goes clockwise 3 o'clock or right margin, 6 o'clock bottom margin and 9 o'clock left margin.



With 3 parameters:



With 2 parameters:



With 1 parameter:



Did I mentioned that you can do the same thing with padding.

That is it.

P.S If you are beginning with CSS you can also find this article useful: CSS Specificity - Cheat Sheet .