{Carrer web log}

Blog about web design & development

CSS Shorthand Clockwise Rule

Tuesday, January 26, 2010 { 25 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 .

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

§Archives <<<

Other Profiles <<<

Content is licensed under a Creative Commons Public Domain License