Padding in CSS

When adding padding to a tag using CSS you sometimes see people who list all measurements together. E.G.

padding: 1px 6px 0px 2px;

At first I didn't know which measurement was for which direction of padding, but then I remembered that old saying "Never Eat Shredded Wheat" (If your not from the UK or younger than 18 you probably won't understand that). It was a saying to remember the directions: North, East, South & West. What has this got to do with padding I hear you cry? Here's what:

Weathervane Padding Example

You see on the above image, North, East, South and West ... well lay this image down flat and we have top, right, bottom and left.

So, instead of:

padding-top: 1px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 3px;

We can just have;

padding: 1px 2px 6px 3px;

Which is the same thing but with less code bloat. I hope this tutorial helps lower the sizes of your CSS stylesheets as it did for me.