Theme Stylesheet & Editing Padding

March 31, 2013 | Filed under: Hacks & Mods | Posted by: Steve Nickson

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

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;