{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 .


25 Responses to “CSS Shorthand Clockwise Rule”

  1. // Anonymous Anonymous // 1/26/2010

    Thank you for this.  

  2. // Blogger RubensaiD // 1/26/2010

    ok... muy interesante... gracias  

  3. // Blogger Gecko85 // 1/26/2010

    I always remember the shorthand clockwise rule as "TRouBLe"  

  4. // Blogger Vladimir // 1/26/2010

    @Gecko85: Yes you can use "TRouBLe" or TRBL - Top, Right, Bottom, Left.

    But what if you are not an English speaker and you don't know how to spell "TRouBLe"?

    I think the "clock" rule is more universal and we can all "visualize" the clock very easy, so our mind can hack the problem with no effort .  

  5. // Anonymous Nate // 1/26/2010

    I think of it in North>East>South>West. Same thing really...  

  6. // Blogger Sean // 1/26/2010

    I also tend to think of it as North East South West.  

  7. // Blogger Jim Gaudet // 1/27/2010

    Top Noon or Top North, that's how I think of it.  

  8. // Anonymous art // 1/27/2010

    just imagine css-soldiers:
    - too much margin on three o'clock!
    - roger that!  

  9. // Anonymous Luca // 1/27/2010

    It's too hard to simply remember top-right-bottom-left? :)
    It's the same order for each property like margin, padding etc...  

  10. // OpenID night-fairy-tales // 1/27/2010

    Great article. Thanks  

  11. // Blogger Vladimir // 1/27/2010

    @Luca: The problem with this rule is not logical we all expect to be Top.Bottom then Left,Right or working in pair (but it is not). It is simply starting from the top and doing clockwise loop.  

  12. // Blogger Chris // 1/28/2010

    @Vladimir: saying "we all expect" is a bit misleading. I don't expect it at all. You might want to choose your wording better.  

  13. // Anonymous Tip Tap Tip // 1/28/2010

    I usually remember it using the word Treble.

    Treble = TRBL  

  14. // Blogger marcomonteiro // 1/28/2010

    i always use this code! TROUBLE
    T = TOP
    R = RIGHT
    B = BOTTOM
    L = LEFT
    =)  

  15. // Anonymous Anonymous // 1/28/2010

    What if i want to have a margin top and a margin bottom only?  

  16. // Blogger Jpomfret // 1/28/2010

    I use the word trouble as well to help. TRBL. only way I can remember it, thanks for the post.  

  17. // Anonymous Anonymous // 1/28/2010

    "What if i want to have a margin top and a margin bottom only?"

    ------

    Then you'd use margin: 10px 0; (with 10px being your top and bottom margins).

    I use the TRouBLe method too... but I always forget the 3 parameter rule!  

  18. // Blogger nattapon // 1/28/2010

    I've never known it before, thank you.  

  19. // Anonymous Aaron // 1/28/2010

    margin: 10px 0;


    If you want a top/bottom margin of 10px, and 0 on the sides.  

  20. // Anonymous Anonymous // 2/01/2010

    Amiable post and this fill someone in on helped me alot in my college assignement. Gratefulness you as your information.  

  21. // Anonymous Anonymous // 2/06/2010

    Easily I assent to but I about the brief should secure more info then it has.  

  22. // Blogger ignacy // 2/13/2010

    Thank you! So useful!  

  23. // Anonymous Anonymous // 2/17/2010

    That's a great way to learn! I'll keep that in mind next time I'm butting heads with IE 6 for a stubborn client.  

  24. // Anonymous Jesper Nielsen // 5/25/2011

    As a newbie-webmaster one of the things I have had most trouble with is the logics of CSS. Your post on the clockwise rule or "trouble" as other name it has been very useful input. Thanks!  

  25. // Anonymous Anonymous // 1/16/2012

    Neat way to explain this. Thanks for sharing!  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

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 <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License