Margins

The following will cover several specific attributes you can change using style sheets. These are margins, fonts and text, and backgrounds.

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, and no more extraneous tables to work around this. Well maybe not all table workarounds will disappear, but they can be much simpler.

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 }

This would create a half inch margin top and bottom, and a full inch margin on the left and right.

Here's a definition to indent text

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