How To Use CSS Margins On Pages

Composition is the top factor in web design, how the page elements are positioned in relation to each other. This is where an understanding of white space between elements like text and images becomes important. Spacing should be consistent through every page hence why we use style sheets.

One aspect of spacing is setting margins, and here is a practical example.

<style>
P { font-size: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
</style>

This is an example of CSS margins being reset to 0px using a rather long approach for a good default setting for compatibility. A better shorthand version can be:

P {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

As part of a DIV style tag, you could also write this as:

<div style="padding:0px 0px 0px 0px; margin:0px; "><p>………..</p></div>

Here are some uses of CSS margins.

1. Setting a clear blank area around the element allows for good composition on pages by separating elements.

2. Use of margins allows for separation using transparency and can be adjusted for various top, bottom, left and right element separations.

The margin property has been known to cause some strange behavior when used with DIV tags or TABLES incorrectly where browser versions are concerned. CSS margins manage the white space so that the designer can have control over any compatibility issues. For example, extra care is needed when writing margins for IE6 as this now quite old browser (though still used) has trouble with correctly placing CSS margins and padding values in the window.

For cross-browser compatibility, set your CSS margins to the auto setting. An example is:

margin-left: auto;

This can help rather than specifying like:

margin: 10px 10px 20px 10px;

Using auto will place your fixed width pages according to the screen size as opposed to the browser by placing elements towards the center of the screen. CSS margins allow you to control white space and in so doing you can separate elements for a nice composition result on the page.

These are 2 points to bear in mind when coding your CSS margins and only IE6 can cause major issues e.g. a margin of 5 may be about 7 or 8 in IE6 – remember to check and compensate:

1. Keep margins consistent across pages and employ enough separation so elements are not looking bunched up on the page.

2. In contrast, don’t make the margins too large; don’t allow people to have to scroll horizontally.

With a bit of care, CSS margins can work for you rather than against you.

Topics: CSS, Design, Web Development