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.
|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.
In CSS, it is possible to specify different padding for different sides:
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;
padding:25px 50px 75px;
Hopefully this should make life a little easier when editing your theme’s stylesheet & padding.
Republished by Blog Post Promoter