margins

Margins in basic HTML are not very easy to set. You tend to have to use tables, or you can use <ul> or <blockquote> to indent text. However, in a style sheet you can use the margin property to set the margins for a tag.

You can specify the width of margins in millimetres, centimetres, inches, points, picas, pixels, height of the font (em) or height of the letter x (ex). You can also specify margins as a percentage. For example:

p {margin: 0.5in;}
p {margin: 10%;}
p {margin: 20px 10px;}
p {margin: 25px 10px 20px 5px;}

The order is top, right, bottom and left. If you specify a single value, the browser applies it to all four margins. If you enter two values, the first value applies to the top and bottom-margins and the second to the left and right-margins. If you enter three values, the first value applies to the top margin, the second to the left and right margins and the third to the bottom margin.

Use negative values for margin settings to out-dented headings. You might want to out-dent the heading if you have lots of text on a page.

You'll probably have the same top and bottom margins for all the tags except for headings. For headings, the bottom margin should be smaller then the top one. This makes the heading look like it is associated with the text that follows it but separates it from the text above.

Instead of setting the margin properties together, you can use the margin-left, margin-right, margin-bottom and margin-top properties to set the individual margins. For example:

p {margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 20px;
   margin-top: 20px;}

Each tag has a margin on each side and the margins can be different widths so there are a couple of things to be wary of:

• If you put the tags side-by-side, the browser combines the margins to create space between them
• If you put the tags together vertically, the browser uses the bigger margin to create the vertical space between them. If a paragraph has a bottom margin of 0.2" and the heading immediately below it has a top margin of 0.5" the space between the paragraphs will be 0.5" (the bigger margin)