{Carrer web log} ←

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 // 1/26/2010

   Thank you for this.  

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

   ok... muy interesante... gracias  

3. //  Unknown // 1/26/2010

   I always remember the shorthand clockwise rule as "TRouBLe"  

4. //  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. //  Nate // 1/26/2010

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

6. //  Unknown // 1/26/2010

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

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

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

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

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

9. //  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. //  Anonymous // 1/27/2010

    Great article. Thanks  

11. //  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. //  Unknown // 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. //  Tip Tap Tip // 1/28/2010

    I usually remember it using the word Treble.
    
    Treble = TRBL  

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

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

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

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

16. //  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 // 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. //  monostable // 1/28/2010

    I've never known it before, thank you.  

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

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

20. //  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 // 2/06/2010

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

22. //  Unknown // 2/13/2010

    Thank you! So useful!  

23. //  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. //  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 // 1/16/2012

    Neat way to explain this. Thanks for sharing!  

Post a Comment

<< Home