CSS Shorthand Clockwise Rule

Tuesday, January 26, 2010 { 25 Comments }

Responses to “CSS Shorthand Clockwise Rule”

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 beWhich 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.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 isWe have 4 parameters itor 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 withThat is it.P.S If you are beginning with CSS you can also find this article useful: CSS Specificity - Cheat Sheet