How To Edit Your Themes Stylesheet – Part 2 Margins
When editing your theme’s stylesheet, remember that the margin command is used to clear an area around an element (outside the border). The margin is completely transparent & should be thought of as simply a blank space. The top, right, bottom, and left margin can be changed individually using separate commands. Or can be changed together using a shorthand command.
Quite often people 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.
A shorthand margin command can also be used, to change all margins at once.
Possible Values
| Value | Description |
| auto | The use of auto means that the browser will set the margin. The result of this is dependant of the browser used. |
| Width | Defines a fixed margin usually in px (pixels) |
| % | Defines a margin in % of the containing element, often used in fluid themes. |
Note: A fluid theme will adjust automatically to fit the width of the screen.
Margin – Individual sides
In CSS, it is possible to specify different margins for different sides and also top & bottom. Note: It is also possible to use negative values, in order to overlap content eg. margin-right:-50px; Also please remember to always end your command with a semi colon ;
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin – Shorthand property
To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is margin:
The margin property can have from one to four values. Examples below are the different configurations you may encounter in your theme stylesheet.
1. margin:25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
2. margin:25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
3. margin:25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
4. margin:25px;
- all four margins are 25px
Hopefully this should make life a little easier when editing your theme’s stylesheet & margins.
Related posts:
