Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Padding in CSS

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:

Padding in CSS

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.



Author's URL: Joseph Skidmore
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com


Like us to: