Specify Margins With Style Sheets

Style sheets allow you to specify margins. What a nice addition to web pages. No longer will text be shoved right up against the sides of the browser.

With margins you can format the text within tables or any HTML element. Also you can indent single lines, whole paragraphs, image spacing, and more.

There are 5 margin properties, well really 4 and 1 shorthand. These properties are:

margin-top margin-bottom margin-right margin-left margin (shorthand)

The values they accept are lengths, or percentages. The lengths are measured in pixels(px), inches(in), centimeters(cm), millimeters(mm), font point (pt), font height (em), and picas (pc).

The percentages are relative to the object, which could be the whole page, or 'inside' of another object, like a table. Negative values are accepted, but be careful when using them.

Examples

P { margin-top: 10px; margin-bottom: 75px; margin-left: 50px; margin-right: 25px; }

This will define the above margins for everything in paragraph tags. Play with resizing your browser window, notice the margins stay the same width.

The margin shorthand notation could have been used in the above and would have looked like this:

P { margin: 10px 25px 75px 50px }

The shorthand order being top - right - bottom - left.

Some even nicer short cuts, if using similar values, can be used. To set a 0.5in margin on each side you could use:

P { margin: 0.5in }

If you have the same top and bottom margins, and the same right and left margins you can use the following shorthand notation:

P { margin: 0.5in 1.0in }

Here is an example to indent text

.indent1 { margin-left: 5%; margin-right: 30%; } .indent2 { margin-left: 30%; margin-right: 5%; }

Wooo Wooo! I'm on a roll now!
Ooopsy-Daisy

_________________
Give a unwanted critter a forever home!