Friday , 18 April 2014
Featured
Home / Hacks & Mods / How To Edit Your Themes Stylesheet – Part 3 Padding

How To Edit Your Themes Stylesheet – Part 3 Padding

How To Edit Your Themes Stylesheet   Part 3 PaddingHow To Edit Your Themes Stylesheet – Part 3 Padding. Whilst padding is quite similar to ” Margin”, you should remember that padding creates blank space inside a border of an element & margin creates the space outside the border of the element. Or put another way, margin is used to make adjustment to where an element would be placed & padding is used to make adjustments to where the content is placed inside an element.  It should also be noted that  whilst margin uses a transparent background, padding adopts the background colour actually being used within the element.

The use & syntax of the command padding is exactly the same as that for margin eg top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value Description
Width Defines a fixed padding usually in pixels (px)
% Defines a padding in % of the containing element

Note: As an example, the containing element could very well be the cell of a table.

 

Padding – Individual sides

 

In CSS, it is possible to specify different padding for different sides:

  • padding-top:25px;
  • padding-bottom:25px;
  • padding-right:50px;
  • padding-left:50px;

 

Padding – Shorthand property

 

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.

The shorthand for padding properties is “padding:”

The padding property can have from one to four values. Quite often people will get confused wondering which number out of the 4 possibilities, represent which margin..? The easiest method I have found to be able to remember this is simply, if there are 4 numbers then the 1st number is at position 12 on a clock face (top margin) , followed by position 3 (right margin), position 6 (bottom margin) & position 9 (left margin). So remembering to start at 12 & travel clockwise will tell you which is which out of the 4 numbers.

padding:25px 50px 75px 100px;

  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

 

padding:25px 50px 75px;

  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

 

padding:25px 50px;

  • top and bottom paddings are 25px
  • right and left paddings are 50px

 

padding:25px;

  • all four paddings are 25px

Hopefully this should make life a little easier when editing your theme’s stylesheet & padding.

About Steve Nickson

Steve is a UK ex-pat currently living in the Philippines, he has been involved with computers for over 24 years, the last 7 years focusing on SEO & Social Media strategies, Web Promotion & Affiliate / Internet Marketing. He is constantly testing new ideas & is always keen to share his knowledge & expertise with fellow bloggers. Connect with Steve using the links below.
Add Comment Register



Leave a Reply

 

Steve NicksonHey guys,

we know your probably just as busy as we are, but we would really appreciate it if you could spare just a few minutes of your valuable time to like us on
Facebook.
Thank You