Joe2Torials.com

Padding

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:

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.