May 28th 09 Posted by Robert Dicks in Computing, CSS, Home

The Trouble With Top, Right, Bottom and Left – Shorthand CSS

A few people ask me in what order do padding/margin values appear when using shorthand CSS. Many people use padding-right:10px;  padding-left:10px; eg.

#left {
padding-top:20px;
padding-left:30px;
padding-right:40px;
padding-bottom:50px;
}

Well the order for shorthand CSS is Top, Right, Bottom and Left and this can be easily remembered by using the word TRouBLe – Top-Right-ou-Bottom-Left so the CSS:

#left {
padding:20px 40px 50px 30px;
}

will give the same as the first CSS example only allot shorter!

Related posts:

1. England Vs Ukraine to be internet only
2. Alcohol At Rugby Games

2 Responses to “The Trouble With Top, Right, Bottom and Left – Shorthand CSS”

1. Paul says:

   May 5, 2010 at 11:09 am

   .. or remember it’s clockwise.
2. Robert Dicks says:

   May 5, 2010 at 11:18 am

   Thanks Paul clockwise is indeed much easier to remember than TRouBLe