How 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

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.

Related posts:

1. Theme Stylesheet – Editing Margins
2. Theme Stylesheet – Editing Borders
3. Theme Stylesheet – Editing Colours
4. Free Theme Problems
5. WP Wordpress Themes – Choosing Best Layout