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

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.



Author's URL: Joseph Skidmore
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Padding in CSS"

Only registered users can write comment

Reader's comments