HTML and CSS  Home HTML and CSS Tutorials Padding in CSS
rss

Padding in CSS

Author: Joseph Skidmore More by this author


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.



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Padding in CSS"