CSS Shorthand Tokens

Posted on

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s