Ruslan Ulanov’s Codeshack

The developer’s notebook

Archive for the ‘Uncategorized’ Category

CSS Shorthand Tokens

leave a comment

In CSS, you will come across some shorthand notation for the margin, border-color, border-style, border-width, and padding properties. It isn’t obvious or easy to remember which token in the value applies to which side of the element so here’s a handy list of the 4 possible varieties:

  1. One token — all-sides-use-the-same-value
  2. Two tokens — top-and-bottom right-and-left
  3. Three tokens — top right-and-left bottom
  4. Four tokens — top right bottom left

At least the four-token example can be remembered by associating the element with a clock where time progresses clockwise.


Written by Ruslan Ulanov

April 25th, 2013 at 8:11 am

Posted in Uncategorized