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

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.

Steve Nickson | Create Your Badge